CSS で複数の境界線を実装するためのヒント

  <div class="border-multiple">
        複数の境界線を実装するソリューション 1: box-shadow
    </div>

    .border-multiple {
        マージン: 50px 自動;
        パディング: 20px;
        幅: 600ピクセル; 
        背景色: #fff; 
        ボックスシャドウ: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    } 

  <div class="border-outline">
        多重境界実装ソリューション2：概要
    </div>
    .border-outline {
        マージン: 200px 自動;
        パディング: 20px;
        幅: 600ピクセル;
        背景色: #ff0;
        アウトライン: 3px 破線 #0f0;
        アウトラインオフセット: -10px;
    } 

  <div class="内側の丸め">
         これを実現するには、box-shadow、アウトライン、「複数の境界線」を使用する必要があります。注: box-shadow の拡張半径は、コーナーの半径の 0.5 倍にする必要があります。</div> 
    .内部丸め {
        背景色: #ccc;
        マージン: 50px 自動;
        パディング: 20px;
        幅: 600ピクセル; 
        パディング: 20px;
        境界線の半径: 20px;
        ボックスシャドウ: 0 0 0 10px #f00;
        アウトライン: 10px 実線 #f00;
    }

   <div class="border-opacity">
         半透明の境界線の実装</div>
    .border-opacity {
        マージン: 50px 自動;
        パディング: 20px;
        幅: 600ピクセル;
        境界線: 10px実線 hsla(0, 0%, 100%, 0.5);
        背景色: #fff;
        背景クリップ: パディングボックス;
    }

   <p class="border-image">border-image の実​​装原理は、9 グリッド拡張方式です。つまり、画像を 9 つの部分に分割し、要素境界の対応する端と角に適用します。 </p>
        <p class="border-image">画像の特定の部分を角に固定するのではなく、要素の幅、高さ、境界線の太さが変化すると、角に表示される画像領域も変化するようにします。 </p>
        .border-image {
            境界線: 40px 透明の実線;
            境界線画像: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
            パディング: 1em;
            最大幅: 20em;
            フォント: 130%/1.6 Baskerville、Palatino、セリフ体;
        }
        .border-image:n番目の子(2) {
            上マージン: 1em;
            画像の繰り返し境界線: 丸い;
        } 

 <p class="contituuous-images">実装のアイデア:
            1. CSS グラデーションと背景拡張機能を使用する 2. 背景画像に純白の単色背景を重ねる 3. 下の背景が境界領域から見えるようにするには、2 つの背景に異なる background-clip 値を指定する必要があります 4. 複数の背景の下部に背景色を設定します。純白の単色背景の効果をシミュレートするには、白から白への CSS グラデーションを使用する必要があります</p>
        .連続画像 {
            パディング: 1em;
            境界線: 1em の透明な実線;
            /* 背景: 線形グラデーション(白、白)、
                            url(http://csssecrets.io/images/stone-art.jpg);
            背景サイズ: カバー;
            背景クリップ: パディングボックス、ボーダーボックス;
            背景の原点: 境界ボックス; */

            /* 背景は以下のように省略することもできます*/
            背景: 線形グラデーション(白、白) パディングボックス、
            url(http://csssecrets.io/images/stone-art.jpg) ボーダーボックス 0 / カバー;

            幅: 21em;
            パディング: 1em;
            オーバーフロー: 非表示;
            /* 境界線をドラッグできます*/
            サイズ変更: 両方;
            フォント: 100%/1.6 Baskerville、Palatino、セリフ体;
        } 

<p class="envelope-border">グラデーション パターンを使用して封筒スタイルの境界線を作成することもできます</p>
.封筒の境界線{
    パディング: 1em;
    境界線: 0.5em 透明実線;
    背景: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
    最大幅: 20em;
    フォント: 100%/1.6 Baskerville、Palatino、serif;}