应控制透明度与模糊半径形成梯度：外层大模糊低透明（如blur:32px, rgba(0,0,0,0.06)），中层中模糊中透明（blur:12px, rgba(0,0,0,0.12)），内层小模糊稍高透明（blur:4px, rgba(0,0,0,0.18)），统一灰阶色值、避免纯黑、深色模式需重定义颜色而非仅调透明度。
box-shadow 多层叠加时颜色发灰、层次糊成一团怎么办
不是颜色选得不对，是透明度和模糊半径没形成梯度。纯黑 rgba(0,0,0,0.2) 在浅色背景上会吸光变脏，而所有层都用 blur: 12px 就等于把远近光影压平了。真实景深里，近处阴影锐利、对比强，远处才弥散淡薄。
- 外层（最远）：大模糊（
blur: 32px）、低透明（rgba(0,0,0,0.06)）、零偏移，只负责环境光氛围 - 中层（主体）：中模糊（
blur: 12px）、中透明（rgba(0,0,0,0.12)）、微下偏移（0 4px），模拟主光源 - 内层（最近）：小模糊（
blur: 4px）、稍高透明（rgba(0,0,0,0.18)）、紧贴底部（0 2px），锚定立体感
别用 #00000020 这类十六进制 opacity 值——它在 Safari 和旧版 Chrome 中渲染不一致，rgba() 才可控。
拟物色调的关键：别用纯黑阴影，改用带灰阶的暗色
苹果玻璃拟态或 Material Design 的“高级感”，本质是控制明度差而非单纯加黑。同一组阴影里混用红蓝紫，反而容易视觉打架；统一用偏暖/偏冷的灰阶暗色，再靠透明度拉开层次，才干净。
- 浅色背景（白/米白）：用
rgba(30, 30, 30, 0.08)→rgba(45, 45, 45, 0.05)→rgba(60, 60, 60, 0.03) - 深色背景（#121212）：换成
rgba(240, 240, 240, 0.06)模拟反光，避免用黑 - 要加色彩倾向？只在最外层加一丁点，比如
rgba(100, 140, 255, 0.02)，其余层保持中性灰
实测发现，超过三层带色阴影就会让眼睛疲劳；两层中性灰 + 一层极淡主色调，平衡度最好。
立即学习“前端免费学习笔记（深入）”；
dark mode 下 box-shadow 颜色失效的真正原因
不是媒体查询没生效，而是你沿用了浅色模式的 rgba(0,0,0,0.1)。深背景上，这个值几乎看不见；强行提亮又会失去纵深。必须重定义色值本身，不能只调透明度。
- 在
@media (prefers-color-scheme: dark)里，把原rgba(0,0,0,0.12)改成rgba(255,255,255,0.06) - 模糊半径保持不变，否则景深比例就乱了
- 如果用了 CSS 自定义属性（如
--shadow-base），JS 动态切换主题时必须同步更新变量值，媒体查询不会自动重算
更隐蔽的问题：某些设计系统导出的暗色阴影值是 hsl(0,0%,20%)，但 hsl() 不支持 alpha 通道，浏览器会降级为不透明色块——务必用 hsla() 或 rgba()。
性能敏感场景下怎么保质感不掉帧
滚动卡片流、悬停动画、移动端页面，box-shadow 容易成为性能瓶颈。问题不在层数，而在参数组合：大模糊 + 圆角 + 变换，三者叠加会让 GPU 放弃硬件加速，切回 CPU 光栅化。
- 滚动容器内，最大
blur控制在16px以内；桌面端可用24px，但移动端建议砍半 - 有
border-radius的元素，优先用filter: drop-shadow()替代box-shadow，它对非矩形轮廓更友好 - 悬停动效别直接改
box-shadow值，改opacity或用transform: translateY(-2px)模拟抬升更轻量
最常被忽略的一点：box-shadow 的 spread 参数大于 10px 且含大模糊时，会触发全量重绘——哪怕只是 hover 状态，也建议用 will-change: transform 提前声明，但别滥用。
