大家都知道给一个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);
效果如下图:
第三步: 通过背景剪裁属性 可以使文字达到渐变效果
实现方式:
.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代码:
如何用css3给文字添加渐变 - web前端之家 web前端之家
最终效果如下图:
关于文字渐变的效果,用的css3,难免有兼容性问题。目前在谷歌ok,ie低版本浏览器不支持。
大家可以去尝试下,用在移动端还是不错滴
总结
其实还有其他方法的,比如用js,这里暂不做讨论。