CSSを使用して透明な枠線を作成するにはどうすればよいですか？

Question

私はブログを持っているクライアントのためにこれをやろうとしています。

彼女は半透明の境界線を望んでいました。私はそれを単なる背景にすることで可能であることを知っています。しかし、バナーのためのこの種のCSSテクニックの背後にある論理/コードを見つけることはできません。誰もこれを行う方法を知っていますか？それは見てだので、それは多くの助けになるあなたは透明/不透明を意味する場合は、

border: 5px solid transparent; 

を使用することができますよりも、完全に透明にしたいまあ場合は、私のクライアントの彼のブログのために達成したい....

Answer 1

あなたがここに

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

を使用することができるよりも、aはあなたが拡張することができ、α、0-1を意味します。

はまた、いくつかは、あなたにも同じ仕事をしopacityを使用することをお勧めかもしれませんが、唯一の違いは、それはそう、そこにいくつかの回避策があるが、rgbaはopacityを使用するよりも優れているようだ、あまりにも不透明になっ子要素になりますです。古いブラウザはrgbaを認識しない場合、彼らはあなたの要素にhex色を適用するように

は、古いブラウザの場合は、常に、バック#（16進数）を使用して、背景色と同じように秋を宣言します。 （代わりbackground-imageのimgタグ付き）

Demo

Demo 2（ネストされたDIVの背景画像と）

Demo 3

body { 
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg); 
} 

div.wrap { 
    border: 5px solid #fff; /* Fall back, not used in fiddle */ 
    border: 5px solid rgba(255, 255, 255, .5); 
    height: 400px; 
    width: 400px; 
    margin: 50px; 
    border-radius: 50%; 
} 

div.inner { 
    background: #fff; /* Fall back, not used in fiddle */ 
    background: rgba(255, 255, 255, .5); 
    height: 380px; 
    width: 380px; 
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */ 
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
         manually calculated*/ 
} 

（デモ3の場合）注：画像は高さに応じて縮尺され、 の幅が提供されます。スケーリング比を破ることはできません。

Answer 2

使用rgba（alpha transparencyとRGB）：

border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity 

alpha transparency変量（0％の不透明度= 100％透明）0〜1（100不透明度= 0％透明）

Answer 3

使用:before擬似要素は、
CSS3のborder-radius、
といくつかの透明です非常に簡単：

LIVE DEMO

<div class="circle"></div> 

CSS：

.circle, .circle:before{ 
    position:absolute; 
    border-radius:150px; 
} 
.circle{ 
    width:200px; 
    height:200px; 
    z-index:0; 
    margin:11%; 
    padding:40px; 
    background: hsla(0, 100%, 100%, 0.6); 
} 
.circle:before{ 
    content:''; 
    display:block; 
    z-index:-1; 
    width:200px; 
    height:200px; 

    padding:44px; 
    border: 6px solid hsla(0, 100%, 100%, 0.6); 
    /* 4px more padding + 6px border = 10 so... */ 
    top:-10px; 
    left:-10px; 
} 

:beforeがOK（あなただけにする必要があり、当社の.circle別の要素にアタッチし、ブロック、アブソリュート、等）透明で、ボーダー不透明度で遊んでください。

Answer 4

border-style: doubleをbackground-clip: padding-boxと一緒に使用して、余分な（疑似）要素を使用することもできます。これはおそらく最もコンパクトなソリューションですが、他のものほど柔軟ではありません。

For example：

<div class="circle">Some text goes here...</div> 

.circle{ 
    width: 100px; 
    height: 100px; 
    padding: 50px; 
    border-radius: 200px; 
    border: double 15px rgba(255,255,255,0.7); 
    background: rgba(255,255,255,0.7); 
    background-clip: padding-box; 
} 

よく見ると、あなたが境界線と背景の間のエッジが完全でないことがわかります。これは現在のブラウザでは問題になっているようです。しかし、国境が小さいときはそれほど気にならない。