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屬性，你還可以建立鏤空的字型！

樣本

為所有的<h1>標題設定一個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，它讓你可以改變&nbsp;空白符的行為，強制文字在它被用到的地方斷行。通過設定值為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)。這意味著第一個元素的底部的邊距和第二個元素的頭部邊距會被合并到一起。

最常見的例子就是兩個相鄰的<p>元素會共用他們的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, 定義每次遞增的速度變化。