17370845950

box-shadow参数顺序固定为h-offset、v-offset、blur、spread、color、inset，前两者必填；blur不可负，spread可正负，inset须置末尾；多层阴影建议两层，避免性能与视觉问题。

box-shadow 参数顺序和必选/可选规则

必须按固定顺序写：h-offset v-offset blur spread color inset，其中前两个是必填，其余全可选。漏掉 blur 或 spread 时浏览器会默认为 0；省略 color 在 Chrome/Safari 下可能渲染为透明（不是黑色），Firefox 则倾向用黑色 fallback，所以颜色别省。

• h-offset 和 v-offset 是“定位锚点”：正数向右/下，负数向左/上，哪怕只设一个为 0，另一个非零，阴影就只朝单方向投射
• blur 不可为负，0 就是硬边，4px 开始有柔和感，卡片常用 8–24px
• spread 可正可负：正值让阴影整体变大一圈（比如给按钮加“光晕感”），负值则收缩——但负得太多会让阴影消失，尤其配合小 blur 时容易“断层”
• inset 是开关，不是值：写就内阴影，不写就是外阴影；它必须放在参数末尾（或紧挨 color 后），位置错会导致整个声明失效

为什么阴影看起来“突兀”？常见参数组合陷阱

突兀感八成来自三件事：模糊太小、透明度太高、偏移太死板。比如 box-shadow: 0 2px 2px rgba(0,0,0,0.3) 这种写法，2px 模糊几乎没虚化，0.3 透明显得生硬，纯垂直偏移又缺乏空间感。

• 别用 0 0 偏移做外阴影：它让元素像被罩在玻璃罩里，失去立体定位，除非你真要四边均匀发光效果（如 loading 圆环）
• 避免 spread 为负且绝对值 > blur：例如 0 4px 6px -8px，阴影会被“掐掉”，只剩一小条暗边，反而像 bug
• 深色背景上别盲目套浅色主题的阴影值：同一组 rgba(0,0,0,0.1) 在白色卡片上柔和，在深灰背景上可能根本看不见

多层阴影怎么配才不卡、不假？

两层阴影（逗号分隔）是性价比最高的真实感提升手段，但堆三层以上对渲染性能有可见影响，尤其在低端 Android 设备上滚动时易掉帧。

box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);

• 第一层负责“接触阴影”：偏移小（2px）、模糊中等（6px）、透明度更低（0.06），模拟物体紧贴底面的细微压暗
• 第二层负责“环境光投影”：偏移更大（8px）、模糊更开（24px）、透明度略高（0.08），表现远处漫反射
• 两层颜色建议同源：都用 rgba(0,0,0,...) 或都用背景色的加深版（如浅灰背景用 rgba(33,33,33,...)），避免色相打架

inset 内阴影的实用边界在哪？

inset 不是万能凹陷工具，它只在元素自身盒模型内生效，不会撑开父容器，也不影响布局流——这点常被误用。

• 适合场景：输入框聚焦态（inset 0 1px 3px rgba(0,0,0,0.1)）、按钮按下反馈（inset 0 -2px 4px rgba(0,0,0,0.2)）、卡片内嵌分隔线
• 不适合场景：想让元素“看起来被挖空一块”却依赖父容器 padding 来露边——inset 阴影不会溢出，边缘会被裁切，得配合 border 或伪元素补形
• 注意 spread 在 inset 下的反直觉行为：正值会让内阴影向中心收缩（变窄），负值反而向外“撑开”，容易误判方向

真正难的不是记住参数名，而是理解每个数字背后的空间隐喻：偏移是光源角度，blur 是空气散射，spread 是投影面距离，透明度是光照强度。调阴影不是调参数，是在布光。