CSS3はさまざまな境界効果を実現します

半透明の境界線

結果：

実装コード:

<div>
半透明の境界線が見えますか?
</div>
div {
    /* キーコード */
    境界線: 10px実線 rgba(255,255,255,.5);
    背景: 白;
    背景クリップ: パディングボックス;
    /* その他のスタイル */
    最大幅: 20em;
    パディング: 2em;
    マージン: 2em 自動 0;
    フォント: 100%/1.5 サンセリフ;
}

実装ポイント:

境界線を半透明に設定します。デフォルトでは、背景は境界線が配置されている領域の下位レイヤーまで拡張され、つまり背景は境界線の外側の端によって切り取られるため、半透明の境界線は見えません。

background-clip: padding-box（初期値は border-box）を設定すると、背景が境界領域の下に広がることがなくなり、パディングの外側の端を使用して背景がクリップされます。

複数の境界

結果：

実装コード:

<div></div>
/* ボックスシャドウの実装 */
div {
    /* キーコード */
    ボックスシャドウ: 0 0 0 10px #655,
            0 0 0 15px ディープピンク、
            0 2px 5px 15px rgba(0,0,0,.6);
    /* その他のスタイル */
    幅: 100ピクセル;
    高さ: 60px;
    マージン: 25px;
    背景: 黄緑;
}
/* 境界線/アウトラインの実装 */
div {
    /* キーコード */
    境界線: 10px 実線 #655;
    アウトライン: 5px 濃いピンク
    
    /* その他のスタイル */
    幅: 100ピクセル;
    高さ: 60px;
    マージン: 25px;
    背景: 黄緑;
}

実装ポイント:

box-shadow の実装では、box-shadow の 4 番目のパラメータ (拡張半径) が使用されます。正の拡張半径に 2 つのゼロ オフセットとゼロのぼかし値を加えると、実際には実線の境界線のように見える「投影」が生成されます。カンマ区切りの構文をサポートする box-shadow を使用すると、任意の数の影を作成できるため、複数の境界効果を実現できます。

境界線/アウトラインの実装では、border を使用して境界線レイヤーを設定し、次に outline を使用して境界線レイヤーを設定します。このソリューションでは点線の境界線を実現できますが、境界線は 2 層しか実現できません。

内側の角の境界線

結果：

実装コード:

<div>角が丸くていいですね</div>
div {
    アウトライン: .6em 実線 #655;
    box-shadow: 0 0 0 .4em #655; /* キーコード*/
    最大幅: 10em;
    境界線の半径: .8em;
    パディング: 1em;
    余白: 1em;
    背景：黄褐色;
    フォント: 100%/1.5 サンセリフ;
}

実装ポイント:

アウトラインは要素の丸い角に沿わないため、直角として表示されますが、box-shadow は沿うため、この 2 つを加算すると、box-shadow (拡張値は border-radius の値の半分とほぼ同じ) がアウトラインとコンテナーの丸い角の間の隙間を埋め、必要な効果が得られます。

要約する

以上が、CSS3 でさまざまな境界線効果を実現する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。