# 阴影与滤镜

URL: https://caijiao.org/css/11-advanced/04-shadow-filter
Source: docs/css/11-advanced/04-shadow-filter.md
Description: CSS 提供了丰富的阴影和滤镜效果，可以为元素添加立体感、模糊、亮度等视觉特效，增强界面表现力。

CSS 中的阴影（`box-shadow` 和 `text-shadow`）与滤镜（`filter`）功能，可以增强网页的视觉表现，使元素更具层次感和动效美感。

---

## 1. 元素阴影（box-shadow）

为盒子添加阴影，支持模糊度、扩展、颜色等参数：

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

示例：

```css
.card {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}
```

### 多重阴影

```css
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2), -2px -2px 6px rgba(0, 0, 0, 0.1);
```

---

## 2. 文字阴影（text-shadow）

为文本添加阴影效果：

```css
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
```

---

## 3. 滤镜效果（filter）

为元素应用图像级别的特效处理，常见类型：

```css
filter: blur(5px); /* 模糊 */
filter: brightness(1.2); /* 亮度调整 */
filter: contrast(1.5); /* 对比度 */
filter: grayscale(100%); /* 灰度 */
filter: sepia(100%); /* 褐色调 */
```

也可以组合多个滤镜：

```css
filter: brightness(1.2) blur(2px);
```

## 阴影与滤镜示例

[在线代码演示](/css/demos/34.html)