css设置字体渐变色

本文主要是介绍css设置字体渐变色，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

参考  https://www.cnblogs.com/ypppt/p/13334613.html

我设置的第一种

 

1. background: linear-gradient(to right, red, blue);
2. -webkit-background-clip: text;
3. 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 用文本剪辑背景，用渐变背景作为颜色填充文本。   第二种 .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 一样，不仅可以取值是 图片路径，也可以是渐变色。

这篇关于css设置字体渐变色的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！