利用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
}
<div class='colorful'>十步杀一人，千里不留行。</div>
效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<span>字体渐变颜色</span>
</body>
</html>
效果
参考：
https://blog.csdn.net/qq_42331027/article/details/90611599
https://www.jianshu.com/p/8a5c0f1b8ccf
网友评论