设计师妹子问：字体颜色渐变，你能实现？

最新推荐文章于 2025-11-12 04:01:14 发布

原创最新推荐文章于 2025-11-12 04:01:14 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用CSS3的content属性和渐变蒙版技术实现字体颜色的渐变效果。通过具体实例代码展示了实现过程，并解释了核心特性的使用方法。

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

想起了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属性还没有被所有浏览器所支持。但相信在不久的将来这些属性都会被其他浏览器所支持，目前在还没有支持这些属性的浏览器中，我们只能采用优雅降级的方式处理。