☰

CSS で境界線の不透明度を設定できますか? 質問する

tag-icon • tag-icon css opacity
CSS で境界線の不透明度を設定できますか? 質問する

このように要素の境界線を半透明にする簡単な CSS の方法はありますか?

border-opacity: 0.7;

そうでない場合、画像を使用せずにそれを実現する方法を誰か知っていますか?

ベストアンサー1

残念ながら、このopacityプロパティは要素全体（テキストを含む）を半透明にします。境界線を半透明にする最良の方法は、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 つの境界宣言を提供することです。1 つ目は偽の不透明度で、2 つ目は実際の不透明度です。ブラウザが対応している場合は 2 番目が使用され、対応していない場合は 1 番目が使用されます。

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% 不透明な赤い境界線と同等の色になります (ただし、境界線の下のグラフィックは透けて見えません)。

background-clip: padding-box;上記の例に追加したのは、単色の背景色が適用された場合でも境界線が透明のままになるようにするためです。

おすすめ記事