CSS3制作渐变文字（-webkit-mask-image 与 -webkit-background-clip）
今天去css-tricks无意间发现了标题运用渐变文字这一效果，这使的想起了webkit内核浏览器的一些私有属性。而实现渐变文字这一特效可以借助webkit浏览器的两个私有属性-webkit-mask-image与-webkit-background-clip。
既然称之为webkit私用属性，我想大家都懂的，要用webkit内核浏览器才能看到效果。Chrome/Safari，这两个浏览器都可以的。
mask-image，从表层文字来看，mask为遮罩的意思，在这里就是给一个元素添加蒙板，配合渐变色来剪辑出你想要的渐变字体效果。而background-clip，这个也是类似的含义，不多做说明了。
在css-tricks里，通过以下代码发现，它的这种渐变效果运用的是后者，也更具多样化（这里下面会再做补充）。
这里是来自css-tricks的预览效果
标题文字（默认）： 标题文字（鼠标经过）：
举个简单地例子来加以说明吧：
1、-webkit-mask-image
HTML：
<p class="wrd1">-webkit-mask-image</p>
CSS:
.wrd1 {
800px;
font:bold 3em Arial,Helvetica,sans-serif;
color:#800;
position:relative;
}
.wrd1:before {
content:'Text-file-color 1';
color:#f00; /*设置字体色值*/
position:absolute;
left:1px;
z-index:2;
-webkit- mask-image:-webkit- gradient(linear,0 0,0 100%,from(rgba(255,0,0,1)),to(rgba(0,0,255,0))); /* 添加渐变蒙板*/
}
预览效果：
以上，添加注释的两个属性为关键属性。渐变蒙板的设置一般是从一个不透明色到透明色的渐变过渡（即opacity值的变化），这里不论你设置什么颜色都将以“不透明--半透明--透明”来显示。
或许你会觉得奇怪，为什么我在“.wrd1:before”里设置渐变蒙板，而不是直接在.wrd1中设置?其实这里的content:'Text-file-color'; ，是相当于把文字复制了一层出来。上面说了，渐变蒙板实现的是一种“透明-半透明-不透明”的文字效果，我们需要实色的文字，就把这两个文字重叠到一起，含有透明的放在上方就可以了……
要注意的是：渐变颜色值中必须有透明色值才能实现此效果。
2、-webkit-background-clip
HTML:
<p class="wrd2">-webkit-mask-image</p>
CSS:
.wrd2 {
800px;
font:bold 3em Arial,Helvetica,sans-serif;
color:transparent; /*将字体设置为透明色*/
background:-webkit-gradient(linear,0 0,0 100%,from(#f00),to(#800)); /*渐变背景*/
-webkit-background-clip:text; /*剪辑背景*/
}
预览效果：
同理，添加注释的地方也是关键点。要注意的是得把字体给设置为透明了，不然你看不到想要的效果，呵呵……其实的，在于对这些属性的理解，在这里我想三言两语也不能说完，文章结尾我提供一些相关资料供大家参考吧！
参考资料：
1、http://css-tricks.com/webkit-image-wipes/
2、http://hi.baidu.com/alimyself/item/0db68b18acf819693f87ce85