box-shadow是最直接、兼容性最好、性能最可控的阴影实现方式，参数必须严格按h-offset、v-offset、blur-radius、spread-radius、color、inset顺序书写，前两项必填，blur-radius非负且影响虚化，spread-radius可正负用于缩放阴影尺寸，inset须置于末尾，多层阴影用逗号分隔且从左到右由远及近渲染。
box-shadow 是最直接、兼容性最好、性能最可控的方式，绝大多数场景下无需绕路用 filter: drop-shadow() 或伪元素模拟。
box-shadow 参数顺序和常见写错点
box-shadow 必须严格按 h-offset v-offset blur-radius spread-radius color inset 顺序书写，前两项不可省略，其余可缺省。
常见错误现象：阴影“突然消失”或“位置偏移”，往往是因为参数顺序错乱或把 blur-radius 和 spread-radius 混用。
- blur-radius 控制边缘虚化程度，值越大越“晕开”，但容易被父容器 overflow: hidden 裁掉
- spread-radius 控制阴影整体尺寸缩放，正值扩大、负值收缩，可用于避免裁剪（比如 box-shadow: 0 2px 8px 2px rgba(0,0,0,0.1) 比 0 2px 8px rgba(0,0,0,0.1) 更不容易被裁）
- 写成 box-shadow: 0 0 10px #000 inset 是合法的；但写成 box-shadow: inset 0 0 10px #000 就无效——inset 必须放在所有颜色参数之后
多层阴影怎么叠加才不打架
多层阴影用英文逗号分隔，**绘制顺序从左到右、由远及近**，即第一个阴影在最底层，最后一个在最上层。 适用场景：卡片浮起感、按钮抬升+高光、深色模式下的层次区分。 - 想模拟“底部厚实+顶部轻盈”的立体效果，推荐：box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.2)
- 每层参数必须完整，不能省略中间项（如 0 0 #000, 0 4px 8px #333 是非法写法）
- 超过 3 层阴影在低端 Android 或旧版 Safari 上可能触发重绘卡顿，列表项或滚动区域慎用
- 颜色统一用 rgba() 控制透明度，别用 opacity，否则整块元素变透，子内容也跟着淡出
为什么有时候阴影不显示？几个硬性检查点
阴影“看不见”通常不是语法问题，而是被环境压制了。 - 父容器设了overflow: hidden（尤其带 border-radius 的卡片），模糊部分直接被裁——解法：给父容器加 padding，或改用 spread-radius 把实边撑出来
- 元素是 inline 类型（如 <img>、<span></span>），默认不渲染 box-shadow——解法：加 display: inline-block 或 block
- 深色背景上用了 rgba(0,0,0,0.2)，对比度太低显得发灰甚至隐形——解法：用 @media (prefers-color-scheme: dark) 切换为 rgba(255,255,255,0.1)
- :disabled 态没处理，导致禁用按钮阴影比正常态还强，视觉逻辑错乱——应单独设 box-shadow: 0 1px 2px rgba(0,0,0,0.08)什么时候该换用 filter: drop-shadow()
只在一种情况值得切：元素轮廓不规则，且你明确需要阴影**贴合 Alpha 通道边缘**，比如： - 带clip-path 剪裁的图形
- border-radius 极大 + overflow: hidden 的头像（圆角非 50%）
- 用 ::before/::after 拼出的气泡箭头
但要注意：
- 必须加在**最外层包裹容器**上，不能只加在主元素或伪元素上
- 容器不能设 overflow: hidden，否则阴影被裁
- 不支持 inset 和 spread-radius，参数只有 dx dy blur color
- 动画/滚动中频繁重绘的区域慎用，性能开销明显高于 box-shadow真正难的不是写对一行 box-shadow，而是判断它在哪种上下文里会被静默吞掉——裁剪、类型、颜色、状态，四个地方漏一个，效果就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
