Css设置div阴影：box-shadow详解

## 简介

`box-shadow` 是 CSS 中用于为元素添加阴影效果的属性。它可以用来创建简单的阴影、内阴影或者复杂的多层阴影。这个属性接受一系列参数来定义阴影的形状、位置、模糊程度、扩展程度和颜色。下面是 `box-shadow` 属性的参数详解：

### 基本语法

```css
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color;
```

<!-- more -->

### 参数详解

1. **`inset` (可选)**:
> - **描述**: 定义阴影是外阴影还是内阴影。
> - 取值:
>   - 默认情况下（不指定），阴影是外阴影。
>   - 如果指定了 `inset`，阴影将变成内阴影，显示在元素内部。
>
> - **示例**: `inset`

2. **`x-offset`**:

> - **描述**: 阴影在水平方向的偏移量，即阴影相对于元素的水平移动。
> - 取值: 任何有效的长度值（如 `px`,`em`,`rem`，负值）。
>   - 正值：阴影向右偏移。
>   - 负值：阴影向左偏移。
> - **示例**: `10px` (阴影向右偏移10像素), `-5px` (阴影向左偏移5像素)

3. **`y-offset`**:

> - **描述**: 阴影在垂直方向的偏移量，即阴影相对于元素的垂直移动。
> - 取值: 任何有效的长度值（如 `px`,`em`,`rem`，负值）。
>   - 正值：阴影向下偏移。
>   - 负值：阴影向上偏移。
> - **示例**: `5px` (阴影向下偏移5像素), `-3px` (阴影向上偏移3像素)

4. **`blur-radius` (可选)**:

>  - **描述**: 定义阴影的模糊半径。值越大，阴影越模糊和扩散；如果设为 `0`，阴影将是清晰的边界。
>  - **取值**: 任何有效的长度值（如 `px`, `em`）。默认为 `0`，表示没有模糊。
>  - **示例**: `15px` (阴影模糊半径为15像素)

5. **`spread-radius` (可选)**:

>   - **描述**: 定义阴影的扩展半径。正值会使阴影扩大，负值会使阴影收缩。
>   - **取值**: 任何有效的长度值（如 `px`, `em`）。默认为 `0`，表示没有扩展。
>   - **示例**: `10px` (阴影扩展10像素), `-5px` (阴影缩小5像素)

6. **`color` (可选)**:

>   - **描述**: 定义阴影的颜色。如果不指定颜色，默认使用 `color` 属性值。
>   - **取值**: 任何有效的颜色值（如 `#000`, `rgba(0, 0, 0, 0.5)`）。
>   - **示例**: `rgba(0, 0, 0, 0.5)` (半透明的黑色)

### 多重阴影

你可以通过逗号分隔的方式为一个元素指定多个阴影。每个阴影将会按照顺序叠加在前一个阴影之上。

```css
box-shadow: 10px 10px 5px #888888, -5px -5px 5px #444444;
```

### 示例

```css
/* 单个外阴影 */
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);

/* 内阴影 */
box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

/* 多重阴影 */
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3), -3px -3px 5px 0px rgba(255, 255, 255, 0.3);
```

### 常见用法举例说明

- **单个外阴影**: `10px 10px 5px 0px rgba(0, 0, 0, 0.75)` 表示阴影向右下偏移 `10px`，模糊半径为 `5px`，颜色为半透明的黑色。
- **内阴影**: `inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5)` 表示一个内阴影，向右下偏移 `5px`，模糊半径为 `10px`，颜色为半透明的黑色。
- **多重阴影**: `3px 3px 5px 0px rgba(0, 0, 0, 0.3)` 和 `-3px -3px 5px 0px rgba(255, 255, 255, 0.3)` 表示两个阴影，一个向右下偏移，另一个向左上偏移，分别有不同的颜色和模糊效果。

通过合理调整这些参数，`box-shadow` 可以用来创建丰富多样的视觉效果，如浮动效果、嵌入效果、发光效果等。