圍繞盒子的玻璃（不透明/透明）邊框？

我想知道是否可以在CSS中看到圍繞盒子的邊框。例如一個包含ul等的導航div。下面是我試圖描述的東西的類型。圍繞盒子的玻璃（不透明/透明）邊框？

謝謝！

2012-05-13 James Barrett

由於示例邊框中有一個圖案，因此您可能需要一個或多個具有alpha通道的PNG背景圖像（以便父級的背景可以在所需的位置和範圍內發光）;只有統一的RGBA顏色的邊框可以在而不是就足夠了。

然後在具有該背景的元素中嵌套另一個塊元素。一個背景圖像，例如HTML：

<div id="glass-box"> 
    <div id="inner"> 
    <p>Text</p> 
    </div> 
</div>

範例CSS：

#glass-box 
{ 
    background: transparent url(glass.png) 0 0 no-repeat; 
} 

#glass-box #inner 
{ 
    margin: 10px; 
    background-color: white; 
}

的transparent相反，你可能想嘗試用不透明< 1.0的RGBA顏色;也許你會使用半透明的灰度玻璃背景圖像，你可以在任何色調上進行投影。

直到本地更好地支持多邊框（請參閱我的評論），您可以通過嵌套塊元素併爲每個邊框提供不同邊框來實現多邊框。其中一些元素的邊距將有助於減少需要嵌套的元素數量以達到預期的效果。

並且直到CSS Backgrounds and Borders Level 3的多個背景圖像得到更好的支持（但它已經是CR了，所以你可能是幸運的），你可以通過使用不同位置（不同）的背景圖像嵌套來實現多個背景圖像的錯覺（定位）塊元素。這樣你就不需要一個固定大小的盒子和背景圖像。

來源

2012-05-14 00:31:34 PointedEars

現在您無法創建Glass/Blur效果寬度CSS。但寬度透明邊框和框陰影可以減弱背景。

你可以看到的結果在我的jsfiddle：http://jsfiddle.net/DoubleYo/hyETB/1/

來源

2012-05-15 14:44:30 DoubleYo

+1（即使我將陰影更改爲更接近此處的陰影：box-shadow：0 .0 20px rgba（0，0，0，.5），0 .0 10px rgba（0，0 ，0，.52）;） –

爲什麼這個答案downvoted沒有評論？這真的沒有幫助，這是一個很好的嘗試。 Upvoting。 –

可以達到非常接近這個使用純CSS效果。此示例使用具有RGBA邊框顏色和多個框陰影的單個元素來添加高光和陰影。

演示：http://dabblet.com/gist/2775781

<div class="box">Your message.</div>

.box { 
    background: #f0edcc; 
    background-clip: padding-box;   /* Background stops at border */ 
    border: 4px solid rgba(255,255,255,.2); 
    border-radius: 3px; 
    box-shadow: 
     0 0 1px rgba(255,255,255,.8), /* Bright outer highlight */ 
     0 0 3px rgba(0,0,0,.8),  /* Outer shadow */ 
     1px 1px 0 rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */ 
     -1px -1px 0 rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */ 
    padding: 10px; 
}

注意box-shadow和RGBA邊框顏色只在IE9 +和最近的火狐，Chrome，Opera和Safari瀏覽器的版本支持。（雖然舊版本的瀏覽器可能支持該屬性的前綴版本。）在不支持的瀏覽器中，這會降低到內部的黃色框。

來源

2012-05-23 17:21:17

圍繞盒子的玻璃（不透明/透明）邊框？

回答

相關問題