第七章 · 7.3 节

阴影与滤镜

阴影负责塑造元素的"高度感"，滤镜负责调整元素的视觉质感——本教程页面本身那道让纸张"悬浮"起来的两侧阴影，正是 5.1 节讲的颜色透明度与本节 box-shadow 的结合运用。

box-shadow 参数详解

.card {
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.25);
  /*          ↑x  ↑y  ↑blur ↑spread ↑color */
}

内阴影与多层阴影

加上 inset 关键字，阴影会画在盒子内部，常用于表现"凹陷"质感的输入框；box-shadow 也支持用逗号叠加多层，从而同时表现"贴近的清晰阴影"与"远处的柔和阴影"，观感更接近真实光照。

input:focus {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}

.elevated {
  box-shadow:
    0 1px 2px rgba(0,0,0,.12),
    0 8px 24px rgba(0,0,0,.16);
}

text-shadow

参数与 box-shadow 类似但不支持 spread 与 inset，只作用于文字轮廓：

.headline {
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

filter 滤镜

filter 提供了一组图像处理函数，可以直接作用于元素（含其子元素与背景），无需切到图像编辑软件预处理：

.thumb { filter: grayscale(1); transition: filter .2s; }
.thumb:hover { filter: grayscale(0); }

filter: drop-shadow() 与 box-shadow 的区别：后者贴合的是元素的矩形盒子边界，前者贴合的是元素内容（含透明区域）实际的可见轮廓，更适合给不规则形状的图标或图片添加阴影。

backdrop-filter

与 filter 处理元素自身不同，backdrop-filter 处理的是元素背后已经渲染好的内容，是"毛玻璃"效果的标准实现方式：

.glass-nav {
  background: rgba(244,245,240,.6);
  backdrop-filter: blur(12px) saturate(1.4);
}