用CSS3实现文字渐变效果

首先要说明，你的浏览器支持CSS3的话，才能看到正确的演示效果。如果你现在用的浏览器是Chrome、Safari等，就是你的浏览器支持background-clip + text-fill-color等CSS3属性，那么你可以看到下面文字渐变的漂亮效果：

CSS（CSS代码中关键有用的其实就是最后三行）：

<style type="text/css">
.text-gradient {
     display: inline-block;
     color: green;
     font-size: 8em; 
     font-family: 微软雅黑;
     background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}; 
</style>

<h2 class="text-gradient">简明现代魔法</h2>

由于目前text-fill-color属性貌似就webkit核心的浏览器支持，所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色，IE下就更不用说了。

但是，文字渐变本身就是装饰性的功能，所以，本着渐进增强的原则，我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上，几行CSS代码，让占有率愈来愈高的Chrome浏览器下有更好的视觉体验效果，何乐而不为呢？

background-clip

background-clip：用来确定背景的裁剪区域。

background-clip是css3.0中新增加的属性，一般喜欢将background-clip与background-origin和background-size一起应用。其中background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。background-clip 用来确定背景的裁剪区域。而 background-origin 用来决定 background-position 计算的参考位置。

首先background-clip在浏览器兼容性: IE和遨游不支持(不知IE9是否支持)。 Firefox添加私有属性-moz-background-clip支持。 Safari和Chrome添加私有属性-webkit-background-clip支持。 Opera: 不支持background-clip属性，添加其私有属性-o-background-clip也不支持。

语法：background-clip ： border | padding | content

border：从border区域向外裁剪掉背景。（超出部分就被减掉）
padding：从padding区域向外裁剪掉背景。（超出部分就被减掉）
content：从content区域向外裁剪掉背景。（超出部分就被减掉）

text-fill-color

text-fill-color是CSS3中的属性，表示文字颜色填充，实现的效果基本上与color一样，目前仅webkit核心的浏览器下支持此属性，与之类似的还有一个属性就是text-stroke表示文本描边，本文主要展示text-fill-color的应用，text-stroke暂时扔在一边。从某种程度上讲text-fill-color与color基本上的作用是一样的，如果同时设置color与text-fill-color属性，显然是颜色填充覆盖本身的颜色，也就是文字显示text-fill-color设置的颜色（当然在浏览器支持text-fill-color属性的情况下）。虽然说，text-fill-color≈color，但是毕竟还是有差别的，就表现效果上来讲，text-fill-color还支持一个transparent属性，也就是透明填充。而这一属性可以实现一些精湛的UI表现，例如文字遮罩。