CSS实例教程:使用CSS3实现实现文字渐变方法

武林网(www.vevb.com)文章简介：我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片。今天我们将介绍两种使用CSS3实现实现文字的方法。

之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片。今天我们将介绍两种使用CSS3实现实现文字的方法。嗯，只有webkit浏览器支持，请暂时无视其它浏览器。

在《CSS的未来：一些试验性CSS属性》中，我们提到了这个属性，相对于Firefox只能用svg做mask，webkit则灵活很多，图片和css3渐变均可。最初注意到这种效果是在舜子的PJblog中：

.textGradient1{-webkit-maskfromto

不足：这个方法是利用蒙板的透明度来实现的，而蒙板的颜色并不能用于渐变中，从例子中可以看到设置的渐变色被无视了，有用的只是alpha值。那么这里的渐变要依赖字体的颜色——也就是说，只支持单色渐变。

严格来说，这个方法需要几个属性组合，包括color/-webkit-text-fill-color和背景渐变：

-webkit-gradientfromto-webkit-background-

这里是一个简单的在线演示，预览效果：

当然，结合-webkit-text-stroke属性，你可以创建更酷的CSS渐变效果。

当然，如果你有其它浏览器中实现纯CSS渐变的方法，欢迎分享 :)