CSS 文本阴影具有更大的偏移量

问题描述 投票：0回答：1

需要一些帮助来制作下图所示的文本阴影enter image description here

我尝试使用 CSS text-shadow 属性，但它的工作效果并不像我想要的那样。

text-shadow:
    6px 6px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -6px -6px 0 #000,  
    6px -6px 0 #000,
   -6px  6px 0 #000,
    6px  6px 0 #000;
javascript css reactjs sass less
1个回答
0
投票

希望这有帮助。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #E8D6E9;
        }
        
        .container {
            position: relative;
            background-color: blue;
        }

        span:nth-child(1) {
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 128px;
            -webkit-text-stroke: 30px #A155A5;
        }
        span:nth-child(2) {
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 128px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <span>Mental Health</span>
        <span>Mental Health</span>
    </div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.