利用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>
<h1 style="background: linear-gradient(to right, rgb(0, 70, 0), rgb(0, 211, 81));background-clip: text;color: transparent;"><b><em>Welcome to Meadows Nursery</em></b></h1>
参考：
/qq_42331027/article/details/90611599
/p/8a5c0f1b8ccf
如果觉得《HTML css 实现字体渐变颜色》对你有帮助，请点赞、收藏，并留下你的观点哦！
