html/css文字的凸起与凹陷效果

最新推荐文章于 2024-01-23 15:48:58 发布

原创最新推荐文章于 2024-01-23 15:48:58 发布 · 4.8k 阅读

8 ·

CC 4.0 BY-SA版权

该页面展示了一个简单的HTML网页设计案例，通过使用不同的阴影效果使文本产生凸起和凹陷的视觉感。案例中定义了两个样式类，分别应用于两段文本以实现效果。

部署运行你感兴趣的模型镜像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>

        body {
            background-color: #808080;
        }
        div {
            width: 600px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 80px;
            font-weight: 900;
            color: #808080;  /*文字颜色必须和背景同色*/

        }
        .tu {
          /*  text-shadow:  右下 +, 左上-;*/
            text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
        }
        .ao {
            text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
        }
    </style>
</head>
<body>

<div class="tu">我是凸起来</div>
<div class="ao">我是凹下去</div>

</body>
</html>

在这里插入图片描述