CSS3制作半透明邊框(Facebox)類似漸變

發(fā)布時(shí)間：2012-12-09 17:47:35 作者：佚名

我要評(píng)論

CSS3制作半透明邊框記得以前Facebook有段時(shí)間使用了非常多的半透明邊框（Facebox），雖然現(xiàn)在不支持了，但是還是值得研究一下,接下來將詳細(xì)介紹，需要的朋友可以參考下

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

你有可能覺得這樣寫就行了：折疊展開CSS Code復(fù)制內(nèi)容到剪貼板

復(fù)制代碼

代碼如下:

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

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

還好我們有CSS3的background-clip屬性 CSS Code復(fù)制內(nèi)容到剪貼板

復(fù)制代碼

代碼如下:

#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 */ }

具體如下：