<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影实现立体字效果</title>
</head>
<style>
    body {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #f2f2f2;
    }

    .container {
        font-size: 20vmin;
        font-family: 'Luckiest Guy';
        line-height: 1;
        margin: 0;
        letter-spacing: 5px;
        color: #e6e6e6;
        text-align: center;
        text-shadow: 1px -1px #fff, -1px 1px #999, -10px 10px 10px #808080;
    }
</style>

<body>
    <h1 class="container">这是一段漂亮的文字</h1>
</body>

</html>

标签: 暂无标签