css实现文字渐变色

一、第一种方法通过background-clip实现

原理：为文字设置渐变背景颜色，并设置透明颜色字体，使用background-clip:text对背景进行裁剪，留下文本部分的背景，从而实现渐变效果。

问题：background-clip: text的兼容性并不好，一旦浏览器不兼容，背景就会直接暴露出来。

<span class="linear-gradient-text"></span>

.linear-gradient-text {
　　background: linear-gradient(to right, red, blue);
　　-webkit-background-clip: text;
　　background-clip: text;
　　color: transparent;
}

浏览器支持background-size:text情况下：

浏览器不兼容情况下：

解决办法：如果对兼容性要求不高，且为了保证平稳退化，可以使用css的特征检测选择器@supports，虽然这个选择器本身也有兼容性问题，但是这样写至少能保证有一个默认颜色。

可以到https://caniuse.com/，查看具体的浏览器支持度。

.linear-gradient-text {
    color: blue;
	@supports (-webkit-background-clip: text) or (background-clip: text) {
		background: linear-gradient(to right, red, blue);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
    }
}

浏览器不兼容情况下：

二、第二种方法通过svg标签实现（只要浏览器支持svg标签就行，兼容性相比第一种要好）

<!--x1,y1,x2,y2控制渐变方向-->
<svg>
   <defs>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      	<stop offset="0%" style="stop-color:red; stop-opacity:1" />
      	<stop offset="100%" style="stop-color:blue; stop-opacity:1" />
      </linearGradient>
   </defs>
   <text x="0" y="36" fill="url(#grad)" style="font-size:36px">渐变文字</text>
</svg>