box-shadow的第四个参数（扩张半径）控制阴影厚度与贴合感，正值外扩模拟抬升，负值内缩增强紧贴效果；多层叠加时左底层右上层，顺序错误会削弱立体感；性能上不触发重排但需避免过多层或低端设备卡顿。
box-shadow 基础写法里，第四个参数（扩张半径）经常被忽略
很多人只写 box-shadow: 10px 10px 20px rgba(0,0,0,0.2)，结果阴影看起来“浮”得不自然，或者边缘太虚、太糊。关键在第四个值——扩张半径（spread radius），它能控制阴影的“厚度”和贴合感。
正向扩张（正值）让阴影整体向外撑开，适合模拟卡片微微抬升的效果；负值则收缩阴影，常用于内凹或紧贴容器的微妙暗边。
- 想让卡片有轻微悬浮感：用
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1)（-2px 收缩避免阴影外溢） - 做深色模式下浅色卡片：加一点正扩张，比如
box-shadow: 0 2px 8px 1px rgba(0,0,0,0.08)，阴影更清晰不发散 - 多层阴影叠加时，每层的 spread 值最好错开，否则会糊成一团
多个 box-shadow 叠加时，顺序决定视觉层次
css 中多个 box-shadow 值用逗号分隔，但渲染顺序是从左到右——最左边的阴影在最底层，最右边的在最上层。这点和 z-index 直觉相反，容易调反导致“上层阴影被盖住”。
典型场景是模拟真实光照：一层远距离柔和大阴影（底层），一层近距离锐利小阴影（顶层）。如果写反了，锐利阴影会被虚影吞掉，立体感就没了。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序示例：
box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15) - 调试技巧：临时把其中一层颜色改成
red或blue，一眼看出哪层在上哪层在下 - 别用太多层（超过 3 层），旧版 safari 和某些安卓 webview 渲染性能会明显下降
box-shadow 不触发重排，但大量使用仍可能卡顿
box-shadow 是纯绘制层操作，不会影响布局（不触发 reflow），这点比 transform + Filter: drop-shadow() 更轻量。但它依赖 GPU 合成，如果页面里几十个元素同时带复杂阴影，尤其在低端 android 设备上，滚动时容易掉帧。
- 列表项用阴影？优先考虑只给 hover 或 focus 状态加，非激活态用
box-shadow: none - 动画中改变
box-shadow值（如 hover 缩放+阴影变大）是安全的，但避免同时改width/height—— 那会触发重排 - 用 chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，能直观看到哪些阴影区域在频繁重绘
IE 和旧版 Safari 对 inset 和 spread 的支持不一致
IE10+ 支持 box-shadow，但不支持 inset 关键字以外的其他关键字；ios Safari 9.3 之前对负 spread 值渲染异常，阴影边缘会出现锯齿或偏移。如果你的项目还要兼容这些环境，得做降级处理。
- 检查是否真需要支持：现在绝大多数业务已可放弃 iOS
- 必须兼容时，用
@supports (box-shadow: 0 0 0 1px #000)包裹高级用法，fallback 用单层简单阴影 - 绝对不要在
inset阴影里混用负 spread，老 Safari 会直接失效，看起来像没写
实际项目里，最常被漏掉的是 spread 半径的微调和多层阴影的堆叠顺序。这两个点不动代码结构，只改一两个数值，立体感差别却很大。