|
原文：CSS的未來：一些試驗(yàn)性CSS屬性
譯自：The Future Of CSS: Experimental CSS Properties
請(qǐng)尊重版權(quán)，轉(zhuǎn)載請(qǐng)注明來源，多謝！
盡管現(xiàn)代瀏覽器已經(jīng)支持了眾多的CSS3屬性，但是大部分設(shè)計(jì)師和開發(fā)人員貌似依然在關(guān)注于一些很“主流”的屬性，如border-radius、box-shadow或者transform等。它們有良好的文檔、很好的測(cè)試并且最常用到，所以如果你最近在設(shè)計(jì)網(wǎng)站，你很難能脫離它們。
但是，隱藏在瀏覽器的大寶庫中是一些高級(jí)的、被嚴(yán)重低估的屬性，但是它們并沒有得到太多的關(guān)注�；蛟S它們中的一些應(yīng)該這樣(被無視)，但是其它的屬性應(yīng)該得到更多的認(rèn)可。最偉大的財(cái)富隱藏在Webkit的下面，而且在iPhone、iPad和Android apps的時(shí)代，開始了解它們會(huì)灰常有用。就連Firefox等使用的Gecko引擎，也提供了一些獨(dú)特的屬性。在本文中，我們將看一下鮮為人知的CSS 2.1和CSS3屬性以及它們?cè)诂F(xiàn)代瀏覽器中的支持情況。
說明: 對(duì)于每個(gè)屬性，我們這里規(guī)定：”WebKit” 即指代使用Webkit內(nèi)核的瀏覽器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko內(nèi)核的瀏覽器(Firefox等)。然后有的屬性是官方CSS 2.1. 規(guī)范的一部分，這意味著更多的瀏覽器甚至一些古老的瀏覽器也會(huì)支持它們。最后，一個(gè)CSS3 的標(biāo)簽標(biāo)明遵守這個(gè)標(biāo)準(zhǔn)，被最新的瀏覽器版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的屬性。
WebKit特有屬性
-webkit-mask
這個(gè)屬性是相當(dāng)強(qiáng)大的，所以詳細(xì)的介紹超出了本文的范疇，它非常值得深入研究，因?yàn)樗梢栽趯?shí)際應(yīng)用中為你省掉很多時(shí)間。
-webkit-mask讓為一個(gè)元素添加蒙板成為可能，從而你可以創(chuàng)建任意形狀的花樣。蒙板可以是CSS3漸變或者半透明的PNG圖片。蒙板元素的alpha值為0的時(shí)候會(huì)覆蓋下面的元素，為1的時(shí)候會(huì)完全顯示下面的內(nèi)容。相關(guān)的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴(yán)重依賴來自于background中的語法。更多信息請(qǐng)查看webkit的博客和下面的鏈接。
示例
圖片蒙板:
.element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}
示例
漸變蒙板:
.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
擴(kuò)展閱讀: Safari Developer Library
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 下一頁 CSS的未來:一些試驗(yàn)性CSS屬性 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 CSS的未來:一些試驗(yàn)性CSS屬性 [1]
第 2 頁 
