武林網(wǎng)(www.survivalescaperooms.com)文章簡介：我們有發(fā)表過CSS文字漸變效果，但是其實那并不是純粹的基于CSS的漸變，它需要一張半透明漸變的png圖片。今天我們將介紹兩種使用CSS3實現(xiàn)實現(xiàn)文字的方法。

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

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

.textGradient1{-webkit-maskfromto

不足：這個方法是利用蒙板的透明度來實現(xiàn)的，而蒙板的顏色并不能用于漸變中，從例子中可以看到設置的漸變色被無視了，有用的只是alpha值。那么這里的漸變要依賴字體的顏色——也就是說，只支持單色漸變。

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

-webkit-gradientfromto-webkit-background-

這里是一個簡單的在線演示，預覽效果：

當然，結合-webkit-text-stroke屬性，你可以創(chuàng)建更酷的CSS漸變效果。

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