早上设计师妹子把设计稿交付过来，乍一看，上面的文字颜色渐变的，而且文字内容是动态的，也就是我们无法用图片来代替。 作为一个有责任担当的汉子，坚决不能说不行。

想起了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个阶段

职场形象：在别人眼里，程序员是这样的