css实现文字渐变

通过css代码实现文字渐变有很大的兼容性问题，如下代码在Chrome和Firefox里可以正常显示，但无法兼容IE：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>枫桥夜泊</title>
        <style>
            span {
                font-size: 30px;
                font-weight: 700;
                color: #5387f8;
                /* 文字边框 */
                /* -webkit-text-stroke: 1px #00104f;
                text-stroke: 1px #00104f; */
                /* 文字渐变 */
                background: -webkit-linear-gradient(-90deg, #6170ff 0%, #4bdfff 100%);
                background: linear-gradient(-90deg, #6170ff 0%, #4bdfff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>

    <body>
        <span>姑苏城外寒山寺，夜半钟声到客船</span>
    </body>
</html>

效果如下：

 

『推荐阅读』

css实现文字渐变

 

posted @ 2021-12-20 10:44  自在逍遥处  阅读(274)  评论(0)  编辑  收藏  举报