方法一
.text {
background: linear-gradient(317.23deg, #DE2929 3.6%, #E33E75 39.75%, #E64CA8 71.38%, #D461D7 100%), #000000;
// 设置元素的背景(图片或颜色)是否延伸到border、padding,content下面
-webkit-background-clip: text;
// 只有设置了这个才显示渐变色
color: transparent;
}
方法二
<!-- 注意这text属性一定要写,要不css中取不到 -->
<div class="text2" text="方法2有渐变色的字体"></div>
.text2 {
position: relative;
color: yellow;
}
.text2::before {
content: attr(text);
position: absolute;
z-index: 10;
color: pink;
-webkit-mask: linear-gradient(to left, red, transparent );
}