CSSは半透明の境界と複数の境界のシーン分析を実現します

シナリオ 1:

半透明の境界線を実現するには:

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

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

解決：

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

分割 {
境界線:10px実線rgba(0,0,0,.5);
背景: 水色;
背景クリップ: パディングボックス;
}

補足: background-clip は IE6-8、Opera10 と互換性がありません

シナリオ2:

複数の境界線を実装するには:

解決策1: ボックスシャドウを使用して複数の投影を生成する

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

div {
背景:#c3e6f4;
ボックスシャドウ:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

解決策 2: ボックスの境界線とストローク属性 (アウトライン) を組み合わせる

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

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

div {
境界線: 6px 破線 #c3f4ec;
アウトライン: 10px 実線 #d9faf6;
背景クリップ: パディングボックス;
} 

要約する

上記は、エディターが紹介した CSS で半透明の境界線と複数の境界線を実装するシナリオ分析です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!