CSS中webkit屬性的簡單使用

今天遇見CSS中的-webkit-tap-highlight-color,不懂,故查閱CSS的webkit屬性以記之。

說明: 對於WebKit屬性,”WebKit” 即指代使用Webkit內核的瀏覽器(Safari、Chrome、iPhone、iPad、Android等)

WebKit特有屬性

-webkit-tap-highlight-color

這個屬性只用於iOS (iPhone和iPad)。當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候,它就會出現一個半透明的灰色背景。要重設這個表現,你可以設置-webkit-tap-highlight-color爲任何顏色。想要禁用這個高亮,設置顏色的alpha值爲0即可。

瀏覽器支持: 只有iOS(iPhone和iPad).

-webkit-nbsp-mode

換行有時是很棘手的事情:有時你希望文字在適當的地方斷行(而不是折行),有時你又不想這樣。一個能控制這個的屬性就是-webkit-nbsp-mode,它讓你可以改變 空白符的行爲,強制文字在它被用到的地方斷行。通過設置值爲space即可實現。

-webkit-mask

-webkit-mask讓爲一個元素添加蒙板成爲可能,從而你可以創建任意形狀的花樣。蒙板可以是CSS3漸變或者半透明的PNG圖片。蒙板元素的alpha值爲0的時候會覆蓋下面的元素,爲1的時候會完全顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等,嚴重依賴來自於background中的語法。更多信息請查看https://www.webkit.org/blog/181/css-masks/

CSS的未來:一些試驗性CSS屬性

webkit-text-stroke

CSS邊框的一個不足就是隻有矩形的元素才能使用。-webkit-text-stroke可以爲文字添加邊框。它不但可以設置文字邊框的寬度,也能設置其顏色。而且,配合使用color: transparent屬性,你還可以創建鏤空的字體!

拋磚引玉,更多webkit應用見:https://www.webkit.org/blog/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章