CSS で半透明の枠線を作成するにはどうすればよいですか?

CSS は要素の境界線の不透明度制御を提供できますか?

CSS で要素の境界線に特定の不透明度を設定するのは簡単な作業のように思えるかもしれませんが、標準の border-opacity プロパティは存在しません。これには課題があります。画像に頼らずに半透明の境界線を実現するにはどうすればよいでしょうか?

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

このコードは、要素の周囲に半透明の赤い境界線を作成します。 -webkit-background-clip プロパティとbackground-clip プロパティは、単色の背景色が適用されている場合でも境界線の透明度を維持するのに役立ちます。

古いブラウザ用のフォールバック ソリューション

ブラウザの場合rgba (IE8 以降) をサポートしていない場合、回避策として 2 つの境界線宣言を使用します。最初の宣言は偽の不透明度を設定し、2 番目の宣言は実際の不透明度を使用します。 rgba を使用できるブラウザは 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 */
}

この回避策は、rgba サポート以前のブラウザを含む、さまざまなブラウザ間で一貫した半透明の境界線エクスペリエンスを提供します。

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