box-shadow六个参数顺序为offset-x、offset-y、blur、spread、color、inset，前两个必填，inset应置末尾；blur非负，spread可负；单边阴影靠负spread抵消blur溢出；多重阴影按书写顺序由远及近分层渲染。
box-shadow 的六个参数顺序和含义必须记牢
box-shadow 不是“随便写几个数字就行”的属性，参数顺序错一位，效果就完全跑偏。标准顺序是：offset-x offset-y blur spread color inset，其中前两个必填，其余全可选，但位置不能乱。
常见错误现象：写了 box-shadow: 0 0 10px #000 inset 却没内阴影——因为 inset 被当成了 color 值解析；正确写法是把 inset 放最前或最后（浏览器都支持），但推荐放最后，更符合直觉：box-shadow: 0 0 10px #000 inset。
-
offset-x和offset-y为 0 时，阴影居中扩散，blur 和 spread 才真正起作用 -
blur只接受非负值，负数会被忽略为 0；设为 0 时阴影边缘锐利，适合做“描边感” -
spread是唯一能为负的长度参数，-2px 相当于把阴影区域向内收缩 2px，常用于单边阴影微调 - 颜色不写会触发浏览器默认行为：Chrome/Safari 默认透明，Firefox 默认取
color值，务必显式声明
实现单边阴影的关键不是“只写一个方向”，而是控制扩散与模糊的抵消
很多人以为 box-shadow: 0 4px 6px rgba(0,0,0,0.1) 就是“只有下边阴影”，其实它会在四个角轻微溢出，尤其在浅色背景上明显漏光。真·单边靠的是 spread 抵消 blur 的横向发散。
比如要干净的底部阴影，用：box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1)。这里 -2px 的 spread 把原本因 blur 向左右延伸的 3px 模糊区“拉回”来，视觉上只剩正下方一条。
立即学习“前端免费学习笔记（深入）”；
- 左/右单边：用
offset-x主导，offset-y设为 0，再配负spread收窄上下溢出 - 上边阴影容易被误判成“文字上浮”，建议搭配
transform: translateY(-1px)微调视觉重心 - border-radius > 0 时，单边阴影会随圆角裁切，此时负
spread更重要，否则圆角处出现“毛边”
多重阴影不是堆叠技巧，而是分层逻辑
用逗号写多个 box-shadow 值，本质是按书写顺序从远到近逐层绘制——第一个最远（像背景虚影），最后一个最近（像贴边高光）。这不是“加法叠加”，而是 z-order 渲染。
典型错误：写 box-shadow: 0 2px 4px #000, 0 0 0 2px #fff 想模拟描边+阴影，结果白边被黑影盖住。正确顺序应是白边在前：box-shadow: 0 0 0 2px #fff, 0 2px 4px #000。
- 内阴影（
inset）和外阴影可共存，但inset总在内容之下、背景之上，无法盖过外阴影 - 过多阴影（>3 层）在低端设备上可能触发渲染降级，尤其配合
transform或动画时 - 不要用多重阴影模拟渐变，性能差且不可控；改用
background: linear-gradient()+ 单层阴影更稳
兼容性陷阱：前缀已基本不用，但 Safari 的 color 解析仍要防
现代 Chrome/Firefox/Edge 全部原生支持 box-shadow，无需 -webkit- 或 -moz-。但 Safari（尤其 iOS 15–16）对无颜色值的处理依然特殊：box-shadow: 0 0 5px 在 Safari 中是透明，其他浏览器可能 fallback 到文字色。
- 始终显式写颜色，哪怕用
rgba(0,0,0,0)也比省略强 - 如果用 CSS 变量传 color，确保变量有 fallback：
box-shadow: 0 0 5px var(--shadow-color, #000) - IE9 是最后一个支持
box-shadow的 IE 版本，如需兼容，避免使用inset或多层阴影（IE9 不支持）
最易被忽略的点：box-shadow 的渲染区域不随 overflow: hidden 裁剪，但会被父容器的 clip-path 或 mask 截断。要做精确边缘控制，别只依赖 overflow。
