box-shadow参数顺序必须严格为h-offset v-offset blur-radius spread-radius color inset，错一位即完全不生效；阴影“看不见”常因overflow:hidden或border-radius裁切，多层阴影从左到右由远及近叠加。
box-shadow参数顺序写错就完全不生效
浏览器对box-shadow的参数顺序是硬性校验，错一位整条声明就被忽略——不是“效果不对”，而是压根不渲染。必须严格按h-offset v-offset blur-radius spread-radius color inset顺序写，前两个值（水平/垂直偏移）缺一不可。
常见翻车点：
- 把
inset写在颜色前面，比如box-shadow: inset 0 0 8px #000，旧版 Safari 直接失效 - 漏单位，写成
box-shadow: 2 2 4 rgba(0,0,0,0.2)，浏览器当无效值跳过 - 误把
blur-radius和spread-radius位置互换，结果阴影又虚又胖还偏移
最稳的起步模板：box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1);——所有值带单位、顺序固定、负spread-radius防溢出。
阴影“看不见”大概率是被裁掉了
不是代码写错了，而是box-shadow的模糊部分撞上了父容器的overflow: hidden或自身border-radius边界。它默认不占布局空间，但会真实绘制在盒模型之外。
立即学习“前端免费学习笔记（深入）”；
典型场景和解法：
- 圆角卡片加了
border-radius但阴影还是方的？必须给同一元素也设border-radius，且父容器不能overflow: hidden——改用padding留白 -
img没阴影？它是inline元素，默认不渲染box-shadow，加display: block或inline-block - 深色背景上阴影发灰隐形？
rgba(0,0,0,0.2)对比度太低，换成rgba(255,255,255,0.1)或用@media (prefers-color-scheme: dark)切换
多层阴影叠加时顺序决定视觉层次
逗号分隔的多个阴影，**从左到右、由远及近**绘制：第一个在最底层，最后一个盖在最上面。这直接影响“浮起感”是否自然。
实用组合：
- 卡片浮起+底部厚实感：
box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.2); - 按钮按下态（外抬升+内凹）：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.05);
注意：每层参数必须完整，不能省略中间项（如0 0 #000, 0 4px 8px #333非法）；超过 3 层在低端 Android 或旧 Safari 上可能卡顿，滚动区域慎用。
别拿filter: drop-shadow()替代box-shadow
对普通div或img，box-shadow才是正解。filter: drop-shadow()基于 Alpha 通道像素运算，会把 PNG 的透明镂空部分也投出阴影，容易扩散失真。
只在这些情况才考虑filter：
- 元素用了
clip-path或不规则border-radius，且必须贴合实际轮廓 - 需要阴影随内容变形（比如文字渐变色下投软影）
但代价明显：filter开销大，和transform同用时某些旧 Safari 会失效，且不支持inset或spread-radius。
