text-shadow 用于设置文本的阴影
text-shadow: 20px 27px 22px pink;
参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
应用场景：实现凹凸文字效果
/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
.tu {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。
最终效果：
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background-color: #666;
}
div {
font-size: 100px;
text-align: center;
font-weight: bold;
font-family: "Microsoft Yahei";
color: #666;
}
/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
.tu {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div class="tu">凹凸特效</div>
<div class="ao">凹凸特效</div>
</body>
</html>
来源：CSDN
作者：我最爱学习了
链接：https://blog.csdn.net/weixin_38111964/article/details/103457484