html字体的渐变效果，如何⽤CSS3给⽂字添加渐变
⼤家都知道给⼀个box添加渐变背景很简单，但是如何⽤CSS3给⽂字添加渐变呢，可能有些童鞋就蒙了，⽤图？当然不是，如果是，那就没分享的必要了，⼀起来学习下。
我们从零开始学习，⼀共分三步：
第⼀步: 绘制⽂本.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: #50935D;
color: #FFF;
}
Web前端之家
看下效果：
第⼆步: 使⽤渐变
渐变属性 分线性渐变、径向渐变、重复性线性/径向渐变
线性渐变background: linear-gradient(to right,#79F296 40%, #27AE60 60%);
这个很熟悉吧，如下图：
背景产⽣了渐变效果
to right 表⽰渐变⽅向从右边开始
'#79F296'颜⾊占据40%, '#27AE60'颜⾊占据60%
径向渐变background: radial-gradient(circle, #79F296, #27AE60)；效果如下图：jquery是什么有什么作用
第三步: 通过背景剪裁属性 可以使⽂字达到渐变效果
实现⽅式:.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
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: 16px 32px;
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: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: transparent;
-
webkit-background-clip: text;
}
Web前端之家
最终效果如下图：
关于⽂字渐变的效果，⽤的CSS3，难免有兼容性问题。⽬前在⾕歌OK，IE低版本浏览器不⽀持。⼤家可以去尝试下，⽤在移动端还是不错滴
总结
其实还有其他⽅法的，⽐如⽤JS，记得先前分享过⼀篇⽂章：实现基于jQuery⽴体⽂字渐变特效当然，如果⼤家有更好的⽅法，也可以分享出来，也可以加QQ。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。