css3中一些隱藏的高級屬性之WebKit特有屬性用法詳解

儘管現代瀏覽器已經支援了眾多的CSS3屬性，但是大部分設計師和開發人員貌似依然在關注於一些很「主流」的屬性，如border-radius、box-shadow或transform等。它們有良好的文件、很好的測試並且最常用到，所以如果你最近在設計網站，你很難能脫離它們。

但是，隱藏在瀏覽器的大寶庫中是一些高級的、被嚴重低估的屬性，但是它們並沒有得到太多的關注。或許它們中的一些應該是這樣(被無視)，但是其它的屬性應該得到更多的認可。最偉大的財富隱藏在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-mask

這個屬性是相當強大的，所以詳細的介紹超出了本文的範疇，它非常值得深入研究，因為它可以在實際應用中為你省掉很多時間。

-webkit-mask讓為一個元素添加蒙板成為可能，從而你可以創建任意形狀的花樣。蒙板可以是CSS3漸層或半透明的PNG圖片。蒙板元素的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴重依賴background中的語法。更多資訊請查看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)));
}

-webkit-text-stroke

CSS邊框的一個不足是只有矩形的元素才能使用。 -webkit-text-stroke可以為文字加上邊框。它不但可以設定文字邊框的寬度，也能設定其顏色。而且，搭配使用color: transparent屬性，你也可以建立鏤空的字型！

範例

為所有的

標題設定一個2px寬的藍色邊框:

h1 {-webkit-text-stroke: 2px blue}

另一個特性是，透過設定1px的透明邊框，可以讓文字變得平滑:

 h2 {-webkit-text-stroke: 1px transparent}

創建紅色鏤空字體：

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

 -webkit-nbsp-mode

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

-webkit-tap-highlight-color

這個屬性只用於iOS (iPhone和iPad)。當你點擊一個連結或透過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你可以設定-webkit-tap-highlight-color為任何顏色。

想要停用這個高亮，設定顏色的alpha值為0即可。

範例

設定高亮色為50%透明的紅色:

   -webkit-tap-highlight-color: rgba(255,0,0,0.5);

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

擴充閱讀: Safari Developer Library

zoom: reset

#通常來說，zoom是一個IE專用的屬性。但是webkit也開始支援它了，而且使用值reset，webkit可以實現不錯的效果(有趣的是，IE不支援這個值)。它讓你重設掉瀏覽器中正常的縮放行為——如果某個元素被聲明了zoom:reset，頁面上的其它元素在用戶放大頁面的時候都會跟著放大。

註：其實，我們常用來停用chrome強製字體大小的時候用到的-webkit-text-size-adjust:none;也是可以實現類似的效果，不同的是，設定該屬性的元素內的文字不會被放大/縮小，但是頁面上的其它元素則會改變－神飛

-webkit-margin-collapse

这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

最常见的例子就是两个相邻的

元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

-webkit-box-reflect

你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

示例

这个倒影会出现在它的父元素的下面并有5px的间距:

  -webkit-box-reflect: below 5px;

这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

-webkit-marquee

另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

示例

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

   

以上是css3中一些隱藏的高級屬性之WebKit特有屬性用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！