在Vue官网看到 “渐进式” 字体的渐变色,感觉很酷,就扒开了他的控制台看看是怎么实现的
分析之后看到,他是给文字透明之后,加一个背景色
// 第一件事就是先给要设置的文字改为透明色
color: transparent;
// 然后就是添加需要的背景色
background: linear-gradient(45deg, red, green);
但是加完之后,背景色是有了,但是文字不出来
然后又跑回去看是不是漏掉了什么,找了一圈之后,发现他加了个 background-clip样式裁剪
background-clip: text; // 设置裁剪的范围
-webkit-background-clip: text; // 对 -webkit- 内核浏览器生效
加上之后发现,这才是我想要的
完毕,收工!