web-dev-qa-db-ja.com

CSS3ボーダーオパシティ？

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

border-opacity:0.7;

？

そうでなければ、誰もが私が画像を使わずにそうすることができる方法についての考えを持っていますか？

csscss3opacity
352
mcbeav

残念ながら、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の提案による）、無地の背景色が適用されても枠線が透明のままであることを確認するため。

554
kingjeffrey

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

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

また、要素にborder-radiusを設定した場合、それはあなたにかなり丸みのあるボーダーを与えます

jsFiddleデモ

enter image description here

129
Pedro L.

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

これは簡単な例です あなたがそれをチェックしたいのであれば。

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

  • Firefoxで動作します

  • 私はそれがIEでまったく機能することを疑います、しかし私はそれを機能させるであろういくらかのフィルタか行動があると思います。

このstackoverflow post もあります。これは他の問題を示唆しています。したがって、多くの場合、ボーダーアルファの有用性が制限されます。

12
Lee

*私が知っている限りでは、私がこのような状況で普通にやることがないのは、より大きなサイズ（（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年以上前のことです。

5
Breezer

W3Cバリデータを使ってCSSのコーディングをチェックすれば、たとえそれが主要なブラウザでうまくいっていても、あなたのCSSコードが許容できるかどうかがわかります。

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

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

w3C規格では受け入れられていません。CSS3でさえもそうです。私は次の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バリデーター/ Direct Input を使用する。

あなたの仕事をチェックするためにバリデーターを使うことは常に良い考えです、それはあなたがコーディング作業の何時間もの後に交差して行くときにコーディングの小さいかさらに大きいエラーさえ見つけるのを本当に助けます。

5
Mark2090

may / some ケースで動作する別の解決策として、border-styleをdottedに変更してください。

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

1
Stephan Samuel

これを試して：

<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;
}

Demo をチェックしてください。

0
A Malik

他の回答では、境界線の不透明度の問題に関する技術的な側面を取り上げていますが、ハックを提示したいのですが（純粋なCSSとHTMLのみ）。基本的に、ボーダーdivとコンテンツdivを持つコンテナーdivを作成します。

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

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

.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;
}
0
RBk