CSS を使用して半透明の境界線と複数の境界線効果を実現する方法についての簡単な説明

この記事では、CSS の半透明の境界線と複数の境界線の効果を 2 つのシナリオで紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

# (学習ビデオ共有:

css ビデオ チュートリアル)

シーン 1:

半透明の境界線の実装:

CSS スタイルのデフォルトの動作により、背景色のレンダリング範囲はコンテンツのパディング境界線です。

半透明の境界線はメインカラーの影響を受け、達成される効果は

解決策:

background-clip 属性を使用して背景の描画領域を指定し、描画領域がコンテンツ パディングのみに制限されるようにします。

div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}

補足: 背景クリップは IE6-8、Opera10 と互換性がありません

シナリオ 2:

複数の実現borders:

オプション 1: box-shadow を使用して複数の投影を生成する

コードと効果は次のとおりです:

div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

オプション2: ボックスの境界線を結合する ストローク属性 (アウトライン)

#特徴: 二重境界線のみを実現できます。これはより柔軟で、点線やその他の効果を使用できます。

コードと効果は次のとおりです。 :

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がCSS を使用して半透明の境界線と複数の境界線効果を実現する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。