box-shadow 是一个 CSS 属性，用于向元素添加阴影效果。它可以设置阴影的颜色、大小、模糊度和偏移量等。以下是 box-shadow 属性的详细参数和用法：
- 基本语法 ：
box-shadow: h-shadow v-shadow blur spread color inset；
```
2. **参数详解** ：
- **h-shadow** (水平阴影偏移量)：
- 定义：阴影在水平方向(X轴)上的偏移位置。
- 取值：正数、负数或零。
- 示例：`h-shadow: 3px` 会使阴影向右偏移3像素，`-3px` 会使阴影向左偏移3像素，`0` 会使阴影在水平方向上与元素对齐。
- **v-shadow** (垂直阴影偏移量)：
- 定义：阴影在垂直方向(Y轴)上的偏移位置。
- 取值：正数、负数或零。
- 示例：`v-shadow: 4px` 会使阴影向下偏移4像素，`-4px` 会使阴影向上偏移4像素，`0` 会使阴影在垂直方向上与元素对齐。
- **blur** (模糊半径)：
- 定义：控制阴影的模糊程度。
- 取值：非负长度值。
- 示例：`blur: 5px` 会使阴影边缘有明显的模糊效果，`0px` 会使阴影看起来像是元素的一个清晰的投影。
- **spread** (扩展半径)：
- 定义：控制阴影的大小。
- 取值：正数或负数。
- 示例：`spread: 2px` 会使阴影在原有基础上向外扩展2像素，`-2px` 会使阴影向内收缩2像素<b class="card40_249__sup_c012" data-sup="sup">1</b>。
- **color** (阴影颜色)<b class="card40_249__sup_c012" data-sup="sup">5</b>：
- 定义：阴影的颜色<b class="card40_249__sup_c012" data-sup="sup">1</b>。
- 取值：颜色名称、十六进制值或 RGB 值<b class="card40_249__sup_c012" data-sup="sup">4</b>。
- 示例：`color: #000000` 会使阴影为黑色，`rgba(250,0,0,0.5)` 会使阴影为半透明的红色<b class="card40_249__sup_c012" data-sup="sup">2</b>。
- **inset** (内阴影)：
- 定义：指定阴影是否为内阴影<b class="card40_249__sup_c012" data-sup="sup">1</b>。
- 取值：布尔值，`true` 或 `false`(默认值为 `false`，表示外阴影)<b class="card40_249__sup_c012" data-sup="sup">4</b>。
- 示例：`inset` 会使阴影向内偏移<b class="card40_249__sup_c012" data-sup="sup">1</b>。
### 示例
以下是一些使用 `box-shadow` 属性的示例：
1. **创建一个黑色的阴影，偏移量为水平2px，垂直2px，模糊度为4px，无扩展大小** <b class="card40_249__sup_c012" data-sup="sup">2</b>：
```css
box-shadow: 2px 2px 4px #000000；
```
2. **创建一个红色的阴影，偏移量为水平0，垂直4px，模糊度为0，扩展大小为2px** <b class="card40_249__sup_c012" data-sup="sup">2</b>：
```css
box-shadow: 0 4px 0 2px #ff0000；
```
3. **创建一个蓝色的阴影，偏移量为水平-2px，垂直-2px，模糊度为0，扩展大小为0** <b class="card40_249__sup_c012" data-sup="sup">2</b>：
```css
box-shadow: -2px -2px 0 0 #0000ff；
```
4. **创建一个带有透明度的阴影，偏移量为水平0，垂直0，模糊度为10px，扩展大小为0，颜色为rgba(0, 0, 0, 0.5)** <b class="card40_249__sup_c012" data-sup="sup">2</b>：
```css
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5)；
```
通过调整这些参数，你可以创建各种不同的阴影效果，以满足不同的设计需求。