web-dev-qa-db-ja.com

CSSを使用して透明な境界線を作成する方法は？

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

http://i.stack.imgur.com/4h31s.png

彼女は半透明のボーダーが欲しかった。私はそれを単なる背景にすることで可能だと知っています。しかし、この種類のバナーのCSSテクニックの背後にあるロジック/コードを見つけることはできないようです。誰もこれを行う方法を知っていますか？それは私のクライアントが彼のブログのために達成したい外観だからです。

htmlcsscss3border
40
user2578407

使用できるよりも完全に透明にしたい場合

border: 5px solid transparent;

不透明/透明を意味する場合、使用できるよりも

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

ここで、aはアルファを意味し、これをスケーリングできます（0-1）。

また、同じ仕事をするopacityを使用することを勧める人もいます。唯一の違いは、子要素も不透明になることです。はい、いくつかの回避策がありますが、rgbaopacityを使用します。

古いブラウザの場合、常にフォールバックとして#（hex）を使用して背景色を宣言します。これにより、古いブラウザがrgbaを認識しない場合、hex色を適用しますあなたの要素に。

デモ

デモ2 （ネストされたdivの背景画像あり）

デモ3 （background-imageの代わりにimgタグを使用）

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の場合）：画像は、指定された高さと幅に従って拡大縮小されるため、拡大縮小率が損なわれないようにしてください。

74
Mr. Alien

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

例 ：

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

Result

よく見ると、境界線と背景の間のエッジが完全ではないことがわかります。これは現在のブラウザの問題のようです。しかし、境界が小さい場合はそれほど目立ちません。

11
Qtax

:before疑似要素を使用して、
CSS3のborder-radius、
といくつかのtransparencyは非常に簡単です：

LIVE DEMO

enter image description here

<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は、.circle別の要素にアタッチして、（ok、block、absoluteなど）透明にするだけで、border opacityで再生する必要があるだけです。 。

9
Roko C. Buljan

rgba（rgbでalpha transparencyを使用）：

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

alpha transparency変量は0（不透明度0％=透明度100％）から1（不透明度100％=透明度0％）の間です。

2
Ghilas BELHADJ