CSS 文字渐变填坑技巧

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>

该方法的缺点是只能实现两种颜色渐变。