实现字体颜色渐变

在项目中遇到了一个字体渐变的需求。

这是UI给的图：

鉴于之前没有做过，特此进行总结。

首先就是正常的字体样式：

font-size: 34px;
line-height: 32px;
letter-spacing: 2px;
color: #a00000;

接着加上

background-image:-webkit-linear-gradient(top, #bc2f08,#d75d10,#de6912);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。（top就是从上面开始渐变）

-webkit-text-fill-color: transparent 使用透明颜色填充文本。

-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

最终实现效果如下：