参考 https://www.cnblogs.com/ypppt/p/13334613.html
我设置的第一种
- background:
- -webkit-background-clip: text;
- color: transparent;
网上说的
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
第二种
.gradient-text-two{
color:red;
}.gradient-text-two[data-content]::after{ content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}mask-image 和 background-image 一样，不仅可以取值是 图片路径，也可以是渐变色。