1. 应用 background-clip 完成文本渐变色
1.1 实现方案
如上图所示，background-clip 设定元素环境（背景图案或色调）是不是延伸至外框、内边距小盒子、具体内容小盒子下边。
应用background-clip: text;能够实现环境（背景图案或色调）被裁掉为汉字的前景色，但如果文本设置颜色，将无法起效，如左 1 所显示，依然表明文字颜色。
这时候，能将文字设置为全透明，但是考虑到兼容问题，在一些电脑浏览器假如background-clip没法起效且文字设置为全透明，则会导致文本遗失。这时候可以选择用-webkit-text-fill-color，此属性优先超过color，能够特定文档的填充色，如左 2 所显示。
最后一步就是将背景图案设为线性渐变，可以用 linear-gradient，如右 1 所显示。
完整的 css 编码如下所示：
background-image: linear-gradient(to bottom, #ec428c, #32d1d3); // 环境线性渐变
color: #ffffff; // 防贫色调，避免文本裁切不生效
background-clip: text;
-webkit-background-clip: text; // 环境被裁掉为汉字的前景色
-webkit-text-fill-color: transparent; // 文字填充为全透明，优先比color高。
1.2 踩雷 1: 线性渐变字体样式消退
在中低端 ios 型号上，发生过线性渐变字体样式消失的难题，清查才发现是由于background-clip 没法 display: flex合理布局下起效。因此开发过程中尽量搞好防贫，避免这几种款式发生在同一个 dom 上。
1.3 踩雷 2: 线性渐变字体样式在一些 ios 型号中出现竖条
应用这种方法完成线性渐变，在一些 ios 型号上会有怪异的竖条，能将背景设置为no-repeat，并适当变小。
background-repeat: no-repeat;
background-size: 98% 98%;
background-position: 50% 50%;
2. 应用 -webkit-mask 完成文本渐变色
-webkit-mask参考了蒙板这个概念，在图片里完成了一定的蒙版实际效果。有照片蒙板和渐变色蒙板二种书写，如上图所示，应用-webkit-mask: linear-gradient(to bottom, #000000，transparent);建立从上向下从黑到透明色蒙板蒙版照片，黑色的一部分会充分表明，全透明一部分会蒙版。
根据这一工作原理，能够实现文本渐变效果，如上图所示，运用:after的基本原理，在文本上边累加一层同样的文本，然后利用-webkit-mask: linear-gradient(to bottom, #000000，transparent);线性渐变蒙版一半的文本，就实现了二种渐变色。
实际的代码参照如下所示：
.title {
position: relative;
color: #ec428c;
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #32d1d3;
-webkit-mask: linear-gradient(to bottom, transparent, #000);
white-space: nowrap;
}
}
<div class="title" data-text="文本渐变色">文本渐变色</div>
此方法的主要缺点只有完成二种渐变色。