Box Shadow(阴影)-Css3

封面图 • 2025-11-06 • Html/Css

`box-shadow` 是 CSS3 中用于为元素添加阴影效果的属性。它可以为盒子模型（如 `<div>`、按钮等）创建立体感，增强视觉层次。

---

## ✅ 语法：

```css
box-shadow: [inset] [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
```

- **inset**（可选）：表示阴影在内容内部（默认是外部阴影）。
- **horizontal-offset**：水平偏移量（正右，负左）。
- **vertical-offset**：垂直偏移量（正下，负上）。
- **blur-radius**（可选）：模糊半径（越大越模糊）。
- **spread-radius**（可选）：阴影扩展大小（正值扩大，负值缩小）。
- **color**（可选）：阴影颜色（默认是黑色）。

---

## 🧪 示例

### 1. 基本阴影（外阴影）

```css
.box {
  box-shadow: 2px 2px 5px #888;
}
```

> 效果：元素右侧和下方有 2px 的偏移，5px 模糊度的灰色阴影。

---

### 2. 内阴影

```css
.box {
  box-shadow: inset 0 0 10px #000;
}
```

> 效果：元素内部有 10px 模糊的黑色内阴影。

---

### 3. 多重阴影（多个阴影）

```css
.box {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.1);
}
```

> 效果：两个不同强度和透明度的阴影叠加。

---

### 4. 阴影颜色和扩散

```css
.box {
  box-shadow: 0 0 10px 5px red;
}
```

> 效果：红色的阴影，10px 模糊，5px 扩展。

---

## 🌟 小贴士

- 使用 `rgba()` 可以设置透明度，让阴影更自然。
- 阴影可以用来模拟卡片（Card）设计，比如 Material Design。
- 不要过度使用阴影，否则会影响页面性能。

---

## 📌 兼容性

| 浏览器 | 支持情况 |
|--------|----------|
| Chrome | ✅ 支持（3.1+） |
| Firefox | ✅ 支持（4.0+） |
| Safari | ✅ 支持（3.1+） |
| Edge | ✅ 支持（12+） |
| IE | ❌ 不支持（IE9 及以下不支持） |

---

如果你需要具体的使用场景或代码示例，可以告诉我，我可以帮你定制！