DIV CSS 佈局教程網

之前，我們有發表過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漸變的方法，歡迎分享 :)