相关知识点：
盒阴影
box-shadow 向框添加一个或多个阴影。
1
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，外部引用修改为内部阴影 |
字阴影
text-shadow 属性向文本设置阴影
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现100*100的盒子的阴影效果，阴影值自拟</title>
<style>
.shadow{
width: 100px;
height: 100px;
border: 1px blue dotted;
background-color: yellow;
/* 向右，向下偏移10px,模糊距离为3px，阴影颜色为蓝色 */
box-shadow: 10px 10px 3px blue;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>实现效果:
![[linux] 域名解析失败案例定位 [Errno -2] Name or service not known](https://img-blog.csdnimg.cn/direct/8162a19b73a24bbca2b9e16a163905b2.png)
