如何使用CSS製作透明邊框？

Question

我試圖爲有博客的客戶做這樣的事情。

她想要一個半透明邊框。我知道這只是一個背景而已。但我似乎無法找到這種CSS技術背後的邏輯/代碼。有人知道怎麼做這個嗎？這將是一個很大的幫助，因爲這是我看客戶想要達到他的博客....

Answer 1

那麼如果你想完全透明的比你可以使用

border: 5px solid transparent; 

如果你的意思是不透明/透明，比你可以使用

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

這裏，a指α，您可以縮放，0-1。

還有些可能會建議你使用opacity該做相同的工作爲好，唯一的區別是它會導致子元素變得不透明過，是的，有一些變通，但rgba似乎比使用opacity更好。

對於舊的瀏覽器，始終聲明使用#（十六進制）的背景顏色，就像一個回落，因此，如果舊的瀏覽器無法識別rgba，他們將運用hex顏色的元素。

Demo

Demo 2（隨着div嵌套的背景圖像）

Demo 3（隨着img標記，而不是一個background-image）

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（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％透明）

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重視我們.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; 
} 

如果你仔細觀察，你可以看到邊框和背景之間的邊緣並不完美。這在目前的瀏覽器中似乎是個問題。但是當邊界很小的時候並不明顯。