画像を使用せずに CSS で半透明の境界線を作成するにはどうすればよいですか?

CSS の要素の境界線の不透明度

CSS は、border-opacity: 0.7 のようなプロパティを使用して、要素の境界線の半透明効果を実現できますか? ?このようなプロパティは存在しませんが、画像に頼らずにこの効果を実現する代替ソリューションを次に示します。

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 以下) 、複数の境界宣言を指定できます:

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 */
}

最初の宣言は、白い背景の上に 50% 不透明な赤い境界線があり、その下のグラフィックスは隠されます。

追加の考慮事項

背景クリップ: パディングボックス;プロパティにより、単色の背景色が適用された場合でも境界線が透明のままであることが保証されます。

以上が画像を使用せずに CSS で半透明の境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。