この記事では、CSS の半透明の境界線と複数の境界線の効果を 2 つのシナリオで紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
css ビデオ チュートリアル)
シーン 1:
半透明の境界線の実装: CSS スタイルのデフォルトの動作により、背景色のレンダリング範囲はコンテンツのパディング境界線です。 半透明の境界線はメインカラーの影響を受け、達成される効果は
解決策:
background-clip 属性を使用して背景の描画領域を指定し、描画領域がコンテンツ パディングのみに制限されるようにします。
div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}シナリオ 2:
複数の実現borders: オプション 1: box-shadow を使用して複数の投影を生成するコードと効果は次のとおりです:div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}#特徴: 二重境界線のみを実現できます。これはより柔軟で、点線やその他の効果を使用できます。
コードと効果は次のとおりです。 :
div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}
以上がCSS を使用して半透明の境界線と複数の境界線効果を実現する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
