HTML css 实现字体渐变颜色

Posted 2021-04-04 coding派

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML css 实现字体渐变颜色相关的知识，希望对你有一定的参考价值。

利用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>

效果

参考：
https://blog.csdn.net/qq_42331027/article/details/90611599
https://www.jianshu.com/p/8a5c0f1b8ccf

以上是关于HTML css 实现字体渐变颜色的主要内容，如果未能解决你的问题，请参考以下文章

div背景颜色怎样渐变 css实现div层背景颜色渐变代码