html字体的渐变效果,用CSS3可以很简单地实现文字渐变效果

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

简明现代魔法

CSS(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;

};

简明现代魔法

由于目前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表现，例如文字遮罩。