CSS实例教程:使用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渐变的方法，欢迎分享 :)

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!