使用css实现文字渐变

效果：

<template>
  <div>
    <span class="font-gradient">用CSS实现文字渐变</span>
  </div>
</template>
<style lang="scss" scoped>
	.font-gradient {
	  background: linear-gradient(to right, red, #1a80ea);
	  -webkit-background-clip: text;
	  color: transparent;
	}
</style>

background: linear-gradient(to right, red, blue);
这行是给背景设置为渐变色，这里注意一点，这样是简写了，其实是给background-image设置为渐变色，不是background-color，是背景图取值为渐变色。
-webkit-background-clip: text;
background-clip属性：规定背景的绘制区域。

取值为 text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

最后写 color: transparent;让文字为透明色，就是让后面背景色显示出来。

链接: 简单说 通过CSS实现 文字渐变色 的两种方式