CSS3制作半透明邊框

記得以前Facebook有段時間使用了非常多的半透明邊框（Facebox），雖然現在不支持了，但是還是值得研究一下。

 

 

你有可能覺得這樣寫就行了：

    #lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }  

然而白色背景會一直擴散到邊框上，變成如下的樣子：

 

還好我們有CSS3的background-clip屬性

#lightbox { -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 */    
-moz-background-clip: content; /* Firefox 3.6 */    
-webkit-background-clip: content; /* Safari 4? Chrome 6? */    
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ }

具體如下：

 

如果我們把background-clip設置成padding-box,那border就不會被影響。

 

 

 

相關內容： background-origin

順便介紹一下和background-clip概念類似的屬性：background-origin，它的功能就是定義背景圖片左上的坐標

 

例子如下：

 

 

瀏覽器兼容：

Works in: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9