渐变字体

image.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p {
              border: .8em darkviolet;
              border-style: dotted double;
              margin: 1em 0;
              padding: 1.4em;
              background: linear-gradient(60deg, red, yellow, red, yellow, red);
              font: 900 1.2em sans-serif;
            }
            
            
            .text {
              background-clip: text;
              -webkit-background-clip: text;
              color: rgba(0,0,0,.2);
            }

        </style>
    </head>
    <body>
        <p class="text">The background is clipped to the foreground text.</p>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容