如何实现如上所示文字渐变效果?

解决办法

background: linear-gradient(0deg,#52d1fffc,#f48cff08);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

具体可以参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip

background-clip参考值

border-box背景延伸至边框外沿(但是在边框下层)。

padding-box背景延伸至内边距(padding)外沿。不会绘制到边框处。

content-box背景被裁剪至内容区(content box)外沿。

text 背景被裁剪成文字的前景色。大概意思是:只有文字区域才有背景

设置背景渐变,文字透明,这样就能让文字颜色看起来渐变一样


--------------

原创文章出自 木法传,如转载请注明本文链接:https://www.mofazhuan.com/446.html

--------------