在项目中遇到了一个字体渐变的需求，鉴于之前没有做过，特此进行总结。 这是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;
解释一下这三个属性
1、background-image属性
用于为一个元素设置一个或者多个背景图像，当设置为-webkit-linear-gradient()时，表示 为文本元素提供渐变背景。 像上面代码中第一个参数top的意思就是从上面开始渐变
2、-webkit-text-fill-color属性
当属性值为transparent时，表示使用透明颜色填充文本
3、-webkit-background-clip属性
当属性值为text时，表示用文本剪辑背景，用渐变背景作为颜色填充文本。
最终实现效果如下：
