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 是投影面距离，透明度是光照强度。调阴影不是调参数，是在布光。