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

最新推荐文章于 2025-01-20 13:57:53 发布

YPL_ZML

最新推荐文章于 2025-01-20 13:57:53 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.youkuaiyun.com/YPL_ZML/article/details/88879454

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

在这里插入图片描述