[解決済み] CSSでボーダーの不透明度を設定することはできますか？

質問内容

CSSで、要素のボーダーを半透明にする方法はありますか？

border-opacity: 0.7;

もしそうでなければ、画像を使わずにそうする方法をどなたかご存知でしょうか？

どのように解決するのですか？

残念ながら 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; を追加し、背景色をベタ塗りしてもボーダーが透明になるようにしました。