1. 运用 background-clip 完成文字突变

1.1 完成计划

CSS 文字突变填坑技巧

如上图所示，background-clip 设置元素的布景（布景图片或色彩）是否延伸到边框、内边距盒子、内容盒子下面。

CSS 文字突变填坑技巧

运用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 完成文字突变

CSS 文字突变填坑技巧

-webkit-mask借鉴了蒙版的概念，在图片上完成了一定的遮罩作用。有图片蒙版和突变蒙版两种写法，如上图所示，运用-webkit-mask: linear-gradient(to bottom, #000000，transparent);创立从上到下从黑色到通明的蒙版遮罩图片，黑色部分会彻底显现，通明部分会遮罩。

CSS 文字突变填坑技巧

基于这个原理，能够完成文字突变作用，如上图所示，使用: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>

该办法的缺陷是只能完成两种色彩突变。