CSS執行個體教程:使用CSS3實現實現文字漸層方法

文章簡介：我們有發表過CSS文字漸層效果，但是其實那並不是純粹的基於CSS的漸層，它需要一張半透明漸層的png圖片。今天我們將介紹兩種使用CSS3實現實現文字的方法。

之前，我們有發表過CSS文字漸層效果，但是其實那並不是純粹的基於CSS的漸層，它需要一張半透明漸層的png圖片。今天我們將介紹兩種使用CSS3實現實現文字的方法。嗯，只有webkit瀏覽器支援，請暫時無視其它瀏覽器。

1.-webkit-mask

在《CSS的未來：一些實驗性CSS屬性》中，我們提到了這個屬性，相對於Firefox只能用svg做mask，webkit則靈活很多，圖片和css3漸層均可。最初注意到這種效果是在舜子的PJblog中：

.textGradient1{-webkit-mask: -webkit-gradient(linear,0%0%,0%100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2)));}

不足：這個方法是利用蒙板的透明度來實現的，而蒙板的顏色並不能用於漸層中，從例子中可以看到設定的漸層色被無視了，有用的只是alpha值。那麼這裡的漸層要依賴字型的顏色——也就是說，只支援單色漸層。

2.-webkit-background-clip:text

嚴格來說，這個方法需要幾個屬性群組合，包括color/-webkit-text-fill-color和背景漸層：

.textGradient2{background: -webkit-gradient(linear,0%0%,0%100%, from(#DEBB47), to(#248F24));color:transparent;/*-webkit-text-fill-color: transparent;*/-webkit-background-clip:text;}

要點：

• color/-webkit-text-fill-color的目的是一樣的，就是讓文字透明，因為其它瀏覽器不支援下面的屬性值，所以這裡建議採用後者，color屬性會讓文字在其它瀏覽器中透明掉。
• -webkit-background-clip屬性的text值是webkit專屬的，gecko、opera和IE9雖然也支援這個屬性，但是並不支援text值，這是關鍵所在。
• 到現在大家應該能看到這個方法的原理是將文字挖空，從而露出背景色。所以背景色在這裡是關鍵，而背景色的漸層可以使用任何顏色，所以，這個方法支援真正的彩色漸層。

這裡是一個簡單的線上示範，預覽效果：

當然，結合-webkit-text-stroke屬性，你可以建立更酷的CSS漸層效果。

當然，如果你有其它瀏覽器中實現純CSS漸層的方法，歡迎分享 :)