盡管現代瀏覽器已經支持了眾多的CSS3屬性,但是大部分設計師和開發人員貌似依然在關注于一些很“主流”的屬性,如border-radius、box-shadow或者transform等。它們有良好的文檔、很好的測試并且最常用到,所以如果你最近在設計網站,你很難能脫離它們。
但是,隱藏在瀏覽器的大寶庫中是一些高級的、被嚴重低估的屬性,但是它們并沒有得到太多的關注?;蛟S它們中的一些應該這樣(被無視),但是其它的屬性應該得到更多的認可。最偉大的財富隱藏在Webkit的下面,而且在iPhone、iPad和Android apps的時代,開始了解它們會灰常有用。就連Firefox等使用的Gecko引擎,也提供了一些獨特的屬性。在本文中,我們將看一下鮮為人知的CSS 2.1和CSS3屬性以及它們在現代瀏覽器中的支持情況。

說明: 對于每個屬性,我們這里規定:”WebKit” 即指代使用Webkit內核的瀏覽器(Safari、Chrome、iPhone、iPad、Android等),”Gecko“指代采用Gecko內核的瀏覽器(Firefox等)。然后有的屬性是官方CSS 2.1. 規范的一部分,這意味著更多的瀏覽器甚至一些古老的瀏覽器也會支持它們。最后,一個CSS3 的標簽標明遵守這個標準,被最新的瀏覽器版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的屬性。
WebKit特有屬性 -webkit-mask這個屬性是相當強大的,所以詳細的介紹超出了本文的范疇,它非常值得深入研究,因為它可以在實際應用中為你省掉很多時間。
-webkit-mask讓為一個元素添加蒙板成為可能,從而你可以創建任意形狀的花樣。蒙板可以是CSS3漸變或者半透明的PNG圖片。蒙板元素的alpha值為0的時候會覆蓋下面的元素,為1的時候會完全顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等,嚴重依賴來自于background中的語法。更多信息請查看webkit的博客和下面的鏈接。

示例
圖片蒙板:
示例
漸變蒙板:
擴展閱讀: Safari Developer Library
-webkit-text-strokeCSS邊框的一個不足就是只有矩形的元素才能使用。-webkit-text-stroke可以為文字添加邊框。它不但可以設置文字邊框的寬度,也能設置其顏色。而且,配合使用color: transparent屬性,你還可以創建鏤空的字體!
新聞熱點
疑難解答