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フォーマットを理解せず、これが宣言全体である場合、ボーダーをまったく表示しないことです。解決策は、2つの境界宣言を提供することです。1つ目は偽の不透明度、2つ目は実際の不透明度です。ブラウザが対応している場合は、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 */
}

最初のボーダー宣言は、白い背景上の50％の不透明な赤いボーダーと同等の色になります（ボーダーの下のグラフィックはにじみ出ません）。

更新：「background-clip：padding-box;」を追加しました。（SooDesuNeのコメントでの提案に従って）この回答に対して、無地の背景色が適用されている場合でも境界線が透明なままであることを確認します。

簡単です。オフセット0のソリッドシャドウを使用します。

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

また、要素にborder-radiusを設定すると、かなり丸い境界が得られます

jsFiddleデモ

他の人が述べたように：CSS-3では、rgba(...)構文を使用して、不透明度（アルファ）値で境界線の色を指定できるとしています。

確認したい場合の簡単な例を示します。

• SafariとChromeで動作します（おそらくすべてのWebkitブラウザで動作します）。

• Firefoxで動作します

• IEではまったく機能しないのではないかと思いますが、それを機能させるフィルターや動作があると思います。

このstackoverflow投稿もあり、他のいくつかの問題を示唆しています。つまり、境界線は、指定した背景色（または背景画像）の上に描画されます。したがって、多くの場合、境界線アルファの有用性が制限されます。

W3Cバリデーターを使用してCSSコーディングを確認すると、主要なブラウザーで機能していたとしても、CSSコードが受け入れ可能かどうかがわかります。

上記のように、CSSを介して透明な境界線を作成します。

border: 1px solid rgba(255, 0, 0, .5);

CSS3であっても、W3C標準では受け入れられません。次のCSSコードで直接入力バリデーターを使用しました。

.test { border: 1px solid rgba(255, 0, 0, .5); }

結果は、

値エラー：境界線値が多すぎるか、認識されない：1px solid rgba（255,0,0,0.5）

残念ながら、アルファ値（ "rgb"の末尾の文字 "a"）は、境界色値の一部としてまだW3Cで受け入れられていません。それはすべてのブラウザーで動作するので、なぜ標準化されていないのでしょうか。唯一の問題は、W3C標準に固執するか、それとも別にしてCSSで何かを作成するかです。

使用するには W3CオンラインCSSバリデーター/直接入力。

バリデーターを使用して作業をチェックすることは常に良い考えです。何時間ものコーディング作業の後で目を見張るときに、コーディングで小さなエラーまたは大きなエラーを見つけるのに役立ちます。

*私が知っている限りでは、このような状況で通常行うことはありませんが、大きなサイズ（（bordersize * 2）+ originalsize）でブロックを下に作成し、それを使用して透明にします

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

ここに例があります

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

更新：

結局のところ、この質問は8年以上前のものであるため、この回答は古くなっています。現在、すべての最新のブラウザーは、rgba、ボックスシャドウなどをサポートしています。しかし、これは8年以上前の適切な例です。

代替ソリューションとしてもで働くいくつかの例：変更border-styleにdotted。

前景色と背景色の間でピクセルのグループを交互にすることは、部分的に透明なピクセルの連続線と同じではありません。一方、これにより必要なCSSは大幅に少なくなり、ブラウザー固有のディレクティブがなくても、すべてのブラウザー間で互換性が大幅に向上します。

他の回答は境界線の不透明性の問題の技術的な側面を扱っていますが、ハック（純粋なCSSとHTMLのみ）を紹介したいと思います。基本的にコンテナdivを作成し、ボーダーdivとコンテンツdivを作成します。

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

そして、CSS :(コンテンツの境界線をなしに設定し、境界線の太さが考慮されるように配置に注意してください）

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

いいえ、CSSで境界線の不透明度を設定するだけの方法はありません。

たとえば、色がわからない場合、単にを使用して境界線の不透明度を変更するだけの方法はありませんrgba()。

これを試して：

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

そして、魔法のCSSが登場します。

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

こちらのデモをご覧ください。