利用CSS中的-webkit-gradient背景渐变属性实现,-webkit-gradient是background的一个属性值,webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] )。
.colorful{
width: 250px;
font-size: 20px;
background-image:
-webkit-gradient( linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22) );
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text
}
效果
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
字体渐变颜色
效果
参考:
https://blog.csdn.net/qq_42331027/article/details/90611599
https://www.jianshu.com/p/8a5c0f1b8ccf