大家都知道给一个box添加渐变背景很简单，但是如何用CSS3给文字添加渐变呢，可能有些童鞋就蒙了，用图？当然不是，如果是，那就没分享的必要了，一起来学习下。
我们从零开始学习，一共分三步：
第一步: 绘制文本.text{
text-decoration:none;
display:inline-block;
font-size:32px;
line-height:1;
border-radius:4px;
padding:16px32px;
background:#50935D;
color:#FFF;
}
Web前端之家
看下效果：
第二步: 使用渐变
渐变属性 分线性渐变、径向渐变、重复性线性/径向渐变
线性渐变background:linear-gradient(toright,#79F29640%,#27AE6060%);
这个很熟悉吧，如下图：
背景产生了渐变效果
to right 表示渐变方向从右边开始
'#79F296'颜色占据40%, '#27AE60'颜色占据60%
径向渐变background:radial-gradient(circle,#79F296,#27AE60);
效果如下图：
第三步: 通过背景剪裁属性 可以使文字达到渐变效果
实现方式:.text{
text-decoration:none;
display:inline-block;
font-size:32px;
line-height:1;
border-radius:4px;
padding:16px32px;
background:radial-gradient(circle,#79F296,#27AE60);
color:#FFF;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
当然方法不止一种呢，一起来看下另外一种方法：.text{
text-decoration:none;
display:inline-block;
font-size:32px;
line-height:1;
border-radius:4px;
padding:16px32px;
background:radial-gradient(circle,#79F296,#27AE60);
color:transparent;
-webkit-background-clip:text;
}
最后还是帖下完整的DEMO代码：html>
如何用CSS3给文字添加渐变-Web前端之家
.text{
text-decoration:none;
display:inline-block;
font-size:32px;
line-height:1;
border-radius:4px;
padding:16px32px;
background:radial-gradient(circle,#79F296,#27AE60);
color:transparent;
-webkit-background-clip:text;
}
Web前端之家
最终效果如下图：
关于文字渐变的效果，用的CSS3，难免有兼容性问题。目前在谷歌OK，IE低版本浏览器不支持。
大家可以去尝试下，用在移动端还是不错滴
总结
其实还有其他方法的，比如用JS，记得先前分享过一篇文章：实现基于jQuery立体文字渐变特效
当然，如果大家有更好的方法，也可以分享出来，也可以加QQ群。
