CSS 实现文本线性渐变

在开发过程中，需要实现一个文本线性渐变的效果的需求，这个时候可以使用 background-image、background-clip、text-fill-color（或者 color） 这三个 CSS 属性搭配使用来实现。

HTML 代码如下：

<div class="wrapper">
  <h3 class="text-linear">CSS 文本线性渐变</h3>
</div>

CSS 代码如下：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 300px;
  margin: 100px auto 0;
  background-color: #effaff;
  font-size: 30px;
}

.text-linear {
  background-image: linear-gradient(to right, #0c02ba, #00ff95);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 或者设置 color: transparent */
}

最终实现效的果如下图：

其中：

• background-image: linear-gradient() 用于创建渐变效果。
• background-clip 用于裁剪背景，值为 text 时表示背景会被裁剪到文本处（更多介绍MDN）。同时，在 Chrome 浏览器中当值为 text 时需要添加前缀 -webkit。

• text-fill-color 用于指定文本字符的填充颜色（更多介绍MDN）。注意，该属性目前还不是标准属性。