css文字描边

代码：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>枫桥夜泊</title>
        <style>
            p {
                font-size: 30px;
                font-weight: 700;
                color: #fff;
                /* 设置描边宽度及颜色 */
                text-stroke: 2px #5387f8;
                /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
                -webkit-text-stroke: 2px #5387f8;
            }
            
            p::before{
                content: attr(data-content);
                position: absolute;
                -webkit-text-stroke: 0;
                color: #fff;
            }
        </style>
    </head>

    <body>
        <p data-content="姑苏城外寒山寺，夜半钟声到客船">姑苏城外寒山寺，夜半钟声到客船</p>
    </body>
</html>

 

效果如下：

『推荐阅读』

css实现文字描边效果

posted @ 2022-11-03 14:09  自在逍遥处  阅读(102)  评论(0)  编辑  收藏  举报