相关知识点：
盒阴影
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>实现效果:
