經常使用的CSS3 -webkit-前綴

1：-webkit-mask:讓一個元素成爲蒙板相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴重依賴來自於background中的語法

-webkit-mask: -webkit-gradient(linear, lefttop, leftbottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

2：-webkit-text-strokeCSS邊框的一個不足就是隻有矩形的元素才能使用。-webkit-text-stroke能夠爲文字添加邊框。它不但能夠設置文字邊框的寬度，也能設置其顏色。並且，配合使用color: transparent屬性，你還能夠建立鏤空的字體！

-webkit-text-stroke: 4px red;

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

想要禁用這個高亮，設置顏色的alpha值爲0便可

-webkit-tap-highlight-color: rgba(255,0,0,0.5);瀏覽器支持: 只有iOS(iPhone和iPad)

4：-webkit-box-reflect你還記得幾乎每一個網站都把他們的網站logo或者頭部的文字作成倒影的那個年代嗎？謝天謝地，那個年代已通過去了，可是若是你要在一些按鈕、導航、或者其餘UI元素上更好的使用這個技術，-webkit-box-reflect是更好的選擇。

這個屬性接受above、below、left和right四個關鍵詞，它們設置倒影的方向，它們和一個設置元素和它的倒影建的距離的數字一塊兒使用。同時，蒙板圖片也是一樣支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影會自動生成並對佈局沒有影響。下面的元素只用了CSS，第二個按鈕用了-webkit-box-reflect屬性

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

5：-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, 定義每次遞增的速度變化

6：-webkit-appearance你曾經想過將一張圖片假裝成單選按鈕麼？或者，一個輸入框看起來像一個複選框？那麼如今appearance 出現了。即使你並不想要讓一個連接看起來老是像個按鈕，下面這個例子也可讓你瞭解到，只要你願意就能夠作到的：

a {
-webkit-appearance: button;
-moz-appearance: button;
}

7：-webkit-user-select禁止選擇文本

8：display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;內容居中

9:-webkit-backface-visibility:hidden;隱藏後臺的層;

10：-webkit-text-size-adjust:none;在中文Chrome裏面，網頁Css裏全部的小於12px的字體 設置都無效，顧名思義禁用webkit內核瀏覽器的文字大小調整功能 

11：-webkit-overflow-scrolling:touch overflow:auto 在IOS裏原生的滾動有慣性效果：當你放手時，滾動會繼續，而後惿來好像你輕輕地彈一下，而後默認狀況下滾動元素並非 這樣的，當你手指離開 的時候滾動會立馬停下來，爲了解決這個問題，webkit裏有一個帶有製造商前綴的css屬性：在IOS上添加-webkit-overflow-scrolling:touch

12： -webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。

限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘外來的WebKit屬性。常見結合屬性：

• display: -webkit-box;必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。
• -webkit-box-orient必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
• text-overflow，能夠用來多行文本的狀況下，用省略號「...」隱藏超出範圍的文本 。 

-webkit-line-clamp

 

-webkit-overflow-scrolling: touch」（容許獨立的滾動區域和觸摸回彈）在ios滾動主要加上body上