文字描边效果

news2024/12/25 14:56:48

在这里插入图片描述
文字描边效果可以通过text-shadow来实现，也可以通过-webkit-text-stroke来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字描边效果</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text-container{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 100vh;
            background: linear-gradient(45deg, #e45c08, #1309d7); /* 从左上到右下的渐变 */
        }
        .text{
            font-size: 100px;
            font-weight: 1500;
            /* 这种方式也能实现但是不支持文字透明 */
            /* text-shadow: 
            0 2px #fff,
            0 -2px #fff,
            -2px 2px #fff,
            2px -2px #fff,
            -2px 0 #fff,
            2px 0 #fff; */

            /* 这种方式支持文字透明，但是兼容性可能有问题 */
            -webkit-text-stroke: 2px #fff;
            color: transparent;
        }
    </style>
</head>
<body>
    <div class="text-container">
        <span class="text">哀吾生之须臾，羡长江之无穷</span>
    </div>
    
</body>
</html>