CSS实现文字凹凸效果，附有详细注释

氿玥

于 2024-07-22 18:43:53 发布

阅读量332

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75404424/article/details/140616882

版权

大家经常能看到很多页面都会存在具有凹凸效果的文字，其实实现起来特别简单，就是通过给文字设置阴影来实现文字本身的凹凸效果。

为凹凸文字设置相同的标签，这样就可以通过给标签赋予属性同时实现在两个效果上，可以减少代码量，然后分别通过设置阴影的方向和颜色来实现不同的凹凸效果。

同一个文本的不同阴影效果可以在同一行完成，用逗号隔开。

具体代码如下：

<!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{
            /*设置页面背景颜色*/
            background-color: rgb(102, 102, 102);
        }
        p{
            /*文字水平居中*/
            text-align: center;
            /*设置文字大小*/
            font-size: 100px;
            /*文字加粗 100-500放大 600-900加粗*/
            font-weight: 700;
            /*设置文字颜色*/
            color:rgb(102, 102, 102)
        }
        .ao{
            /* 
            水平偏移量(正值向右 负值向左)
            垂直偏移量(正值向下 负值向上)
            模糊度(不能为负值 值越大越模糊)
            颜色(可以设置透明度)
            */
            text-shadow: 1px 1px 0px #fff,-1px -1px 0px #000;
        }

        .to{
            text-shadow: 1px 1px 0px #000,-1px -1px 0px #fff;
        }
    </style>
</head>
<body>
    <p class="ao">对酒当歌，人生几何！</p>
    <p class="to">譬如朝露，去日苦多。</p>
</body>
</html>

以下是代码实现效果：