要素の不透明度に影響を与えずに半透明の境界線を作成するにはどうすればよいですか?

要素の不透明度に影響を与えずに CSS の境界線を透明にすることはできますか?

CSS には境界線の不透明度プロパティは存在しません。これにより、透明な要素コンテンツの欠点を持たずに半透明の境界線を作成する方法が疑問になります。

rgba カラー形式を使用した解決策

rgba() カラー形式では、次のことが可能になります。透明感のあるカラーに。 50% の不透明な境界線を作成する例を次に示します。

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

このアプローチでは、境界線の透明度が要素のコンテンツの不透明度に影響を与えないことが保証されます。

以前の代替アプローチブラウザ

rgba をサポートしていないブラウザ (IE8 以前など) の場合は、2 つの境界線ソリューションを使用できます。

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

最初の境界線は偽の不透明度を提供します。 、2 番目の境界線は、必要な透明度を持つ実際の境界線を定義します。最新のブラウザは最初の境界線を無視しますが、古いブラウザはそれを使用して透明度をエミュレートします。

Background-clip Property

単色の背景色が適用され、background-clip:padding-box;プロパティが例に追加されました。これにより、背景が境界線の透明度に影響を与えるのを防ぎます。

以上が要素の不透明度に影響を与えずに半透明の境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。