本文已参与「新人创作礼」活动，一起开启掘金创作之路。
CSS 文字阴影 text-shadow
CSS text-shadow 属性为文本添加阴影。
语法text-shadow: h-shadow v-shadow blur color;
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
接下来，为阴影添加颜色：
然后，向阴影添加模糊效果：
CSS box-shadow
box-shadow 属性应用阴影于元素。
语法 box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
参数解释：
- offset-x：必需，取值正负都可。offset-x水平阴影的位置。
- offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
- blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
- spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
- color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
- inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。
最简单的用法是只指定水平阴影和垂直阴影：
接下来，为阴影添加颜色：
接下来，向阴影添加模糊效果：
卡片阴影效果：
CSS 阴影属性
| 属性 | 描述 |
|---|---|
| box-shadow | 向一个元素添加一个或多个阴影。 |
| text-shadow | 在文本中添加一个或多个阴影。 |
