box-shadow多重叠加需按从后往前的绘制顺序配置，先写外层柔光阴影再写内层锐利阴影，配合透明度梯度与背景协调，避免大模糊值引发性能问题。
box-shadow 多重叠加的写法和顺序逻辑
多重 box-shadow 不是“叠得越多越好”，而是靠层叠顺序和参数配合模拟真实光照。浏览器按声明顺序从后往前绘制阴影：写在前面的阴影在底层，写在后面的在顶层。这意味着，想让柔光外扩效果包裹锐利内边，就得先写扩散大的外阴影，再写偏移小、模糊低的内阴影。
-
box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05);—— 典型三层结构：外柔光 + 中过渡 + 内描边 - 第一层（最远）用大
blur和低透明度模拟环境光散射；第二层用中等blur和稍高透明度强化主体体积；第三层无偏移+细边框，增强轮廓清晰度 - 避免把高透明度的大阴影写在最后——它会盖住前面所有细节，看起来像糊了一层灰
rgba 透明度值选多少才不显脏又不失层次
阴影不是越黑越高级，关键在明度差与背景的协调。纯黑 rgba(0,0,0,0.3) 在浅色背景上容易发灰，在深色背景上又可能吞没内容。真正耐看的阴影，往往用带灰阶的暗色而非纯黑。
- 浅色背景推荐：
rgba(0,0,0,0.08)～rgba(0,0,0,0.12)，搭配blur≥8px；深色背景改用rgba(255,255,255,0.06)模拟反光 - 别直接套用设计稿给的“#00000020”——十六进制 opacity 不跨浏览器一致，
rgba()更可控 - 同一组件的不同阴影层，透明度应有梯度（如 0.08 → 0.05 → 0.03），否则视觉上会“粘连”成一块
性能陷阱：哪些 box-shadow 配置会让渲染变慢
多重阴影本身不卡，但某些组合会触发全量重绘或迫使浏览器启用软件渲染。特别是当 box-shadow 含有大范围扩散且元素本身有圆角或变换时，GPU 可能无法高效处理。
- 避免
blur> 30px +spread> 10px 的组合，尤其在滚动容器内；实测 Chrome 下这类阴影会使will-change: transform失效 - 圆角元素（
border-radius）叠加多层阴影时，优先用filter: drop-shadow()替代——它对形状更友好，但不支持内阴影 - 动画中动态改
box-shadow是高开销操作，如需悬停变化，建议只动opacity或用transform位移代替偏移值变化
响应式阴影：不同设备下如何保持质感不崩
桌面端看着精致的阴影，到手机上可能糊成一团黑块。这不是缩放问题，而是物理像素密度和观看距离差异导致的感知变化。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议把最大
blur控制在 16px 以内，offset减半（如桌面用0 6px，手机用0 3px） - 用
@media (prefers-reduced-motion: reduce)关闭动画类阴影变化，但保留静态层次——这是可访问性硬要求，不是锦上添花 - 不要依赖
rem或em控制阴影尺寸，它们随字体缩放，而阴影该随设备物理尺寸缩放；改用px或vw更稳妥
阴影的质感不在参数堆砌，而在每层目的是否明确：哪层负责空间定位，哪层负责材质反馈，哪层只是防边缘丢失。调错一层，整组就失去呼吸感。
