真正影响视觉层次感的是 blur 与 spread 的组合：blur 控制模糊扩散，spread 控制阴影体积；正 spread 模拟远距投影，负值用于内凹；多层阴影从左到右绘制，超 3 层易致性能下降；阴影不随 scale 缩放，需响应式手动调整；inset 阴影需配合 transparent border 与 outline 独立设置。
box-shadow 的 blur 和 spread 到底谁在控制“深度”
真正影响视觉层次感的不是阴影颜色或偏移量，而是 blur（模糊半径）和 spread（扩展半径）的组合关系。很多人调不出“浮起来”的效果，是因为只调 blur，却忽略了 spread 对阴影体积的塑造作用。
-
blur越大，阴影越“虚”、越扩散，但单独增大它会让阴影变淡、边缘发散，反而削弱立体感 -
spread为正时，阴影整体向外均匀扩张，能模拟物体离背景更远时投下的“更大更实”的影子；为负时则向内收缩，适合内凹或压边效果 - 真实场景中，
blur常取4px–12px，spread取0–4px；比如卡片悬浮：box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06)
多层 box-shadow 叠加时的渲染顺序和性能隐患
CSS 支持用逗号分隔写多个阴影，但它们是按从左到右顺序逐层绘制的——最左边的在最上层，最右边的在最底层。这决定了你能不能做出“内柔外硬”的嵌套阴影，也直接影响重绘开销。
- 浏览器对单个元素的
box-shadow层数没有硬性限制，但超过 3 层后，滚动或动画时 GPU 渲染压力明显上升，尤其在低端 Android 设备上易掉帧 - 常见错误：用两层高
blur阴影模拟“厚阴影”，结果导致边缘过度融合、失去方向感；正确做法是分层：一层小blur+正spread表现近距投影，一层大blur+0spread表现环境漫射 - 避免在
:hover中突然叠加 2 层以上新阴影——过渡动画会卡顿；建议初始状态就设好基础阴影，只微调动transform或opacity
响应式设计里 box-shadow 的缩放陷阱
阴影尺寸不会随 transform: scale() 缩放，也不会被 zoom 影响。这意味着你在媒体查询里改容器尺寸时，如果不手动调整 box-shadow 参数，UI 层次感会失衡。
- 移动端卡片若沿用桌面端的
box-shadow: 0 8px 24px ...，在 375px 宽屏幕上会显得过重、喧宾夺主 - 不要依赖
rem或em单位自动适配阴影——box-shadow的长度值不继承字体大小，1rem在根字号为 16px 时永远是 16px - 推荐方案：用 CSS 自定义属性 +
@media覆盖，例如定义--shadow-depth: 4px，再在@media (max-width: 768px)中设为2px，然后所有阴影写成0 var(--shadow-depth) ...
inset 阴影在表单控件中的误用与修复
inset 不只是“让按钮看起来被按下去”，它本质是把阴影画在元素内容区内部。很多表单组件（如 input、textarea）默认有 border 和 outline，叠加 inset 后容易出现边界打架、焦点态失效等问题。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：
input:focus加了inset阴影后，光标位置偏移、文字被遮挡、或 Chrome 下 outline 消失 - 原因：浏览器对
inset阴影的绘制区域包含 padding，但不自动避让 border；若 border 非 transparent，阴影会被截断 - 安全写法：确保
border-color: transparent，用background-clip: padding-box控制背景裁剪，并给outline单独设置（如outline: 2px solid #007aff），不依赖阴影模拟焦点
阴影不是装饰开关，它是空间建模工具。同一个 box-shadow 值，在不同背景色、不同相邻元素间距、甚至不同设备像素比下，呈现的“深度感”都可能失效。调试时别只盯着 DevTools 里的数值，得拉开真机对比看。
