阴影与滤镜

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

---

1. 元素阴影（box-shadow）

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

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

示例：

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

多重阴影

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

---

2. 文字阴影（text-shadow）

为文本添加阴影效果：

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

---

3. 滤镜效果（filter）

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

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

也可以组合多个滤镜：

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

阴影与滤镜示例

loading