早上设计师妹子把设计稿交付过来，乍一看，上面的文字颜色渐变的，而且文字内容是动态的，也就是我们无法用图片来代替。 作为一个有责任担当的汉子，坚决不能说不行。
想起了CSS3 擅长做颜色渐变。所以赶紧查看了一下文档，看看CSS3在对字体颜色渐变的实现上有没有相关的方案。
我试了一下，强大的CSS3给我们提供相关的特性，能让我们很方便地就实现字体颜色渐变，看下面这段代码：
<h1 class='beauty-font' text='web前端教程'>
web前端教程
</h1>
<style>
.beauty-font{
display: inline-block;
font-size: 80px;
position: relative;
color: red;
}
.beauty-font:after {
content: attr(text);
position: absolute;
left: 0;
z-index: 2;
color:black;
-webkit-mask: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0,0,0,0.1)),
to(rgba(0,0,0,0.8)));
);
}
</style>
最后实现的效果如下：
（效果图）
我们来详细学一下字体渐变的实现，这里使用到的几个核心特性有：content内容生成技术和渐变蒙版。
1.content内容生成技术
说起伪类 :after 大家一定不陌生，在日常开发中我们会经常用到它。我们经常会这样使用：
.demo:after{
content: 'web前端教程';
}
但很少人知道，content属性的值除了使用文本之外，还可以直接访问读取标签的一些属性值。使用的方法是： attr() ，参见如下的代码：
<div class='demo' text='web前端教程'></div>
.demo:after{
content: attr(text);
}
以上这种写法同样能给content属性赋值：“web前端教程”。
2.渐变蒙版
渐变蒙版的实现主要是靠CSS3的 -webkit-mask 和 -webkit-gradient 配合着使用。
-webkit-mask 主要是用来给一个元素添加一个蒙版。蒙版可以是透明的png图片也可以是CSS3的渐变效果。在这里我们使用CSS3的 -webkit-gradient 来实现渐变效果。
大家上面看到的字体颜色渐变的效果就是用这两个属性来实现的。我把实现的效果拆分一下，大家就一目了然。如下图：
大家看到最后的字体渐变效果，其实是两个字体叠加出来的效果：原始元素+蒙版。在这里给大家讲解了字体实现渐变的原理，有兴趣的同学可以自己实现一个，CSS3的语法就不在这里展开了，具体的语法不熟悉的话可以翻查相关文档，相信大家很容易就能上手。
不过这些CSS3属性还没有被所有浏览器所支持。但相信在不久的将来这些属性都会被其他浏览器所支持，目前在还没有支持这些属性的浏览器中，我们只能采用优雅降级的方式处理。
热门文章
原创教程：《ECMAScript 6 教程》
附加习题：《ECMAScript 6 教程》测试题
原创教程：《Vue2.0基础教程》
原创教程：《Vue2.0进阶教程》
附加习题：《Vue2.0基础教程》测试题
职场感悟：混口饭吃，谈不上喜欢
感到迷茫：我很努力，但依然很迷茫
薪资待遇：那么点工资，能招到人吗？
培训出身：我是一个培训出身的程序员
培训费用：花1.8万参加前端培训，值吗？
培训简历：简历包装成1-2年经验，咋办？
搞笑黑话：互联网公司黑话，搞笑到爆
职业自由：程序员职业自由的6个阶段
职场形象：在别人眼里，程序员是这样的
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Designer%20girl%20asked%20Font%20color%20gradient%20can%20you%20achieve%20it.html
支付宝扫一扫 
评论列表（196条）
测试