box-shadow实现多重边框需按从内到外顺序书写，spread为累积值；三圈各3px应写为0 0 0 3px、0 0 0 6px、0 0 0 9px；inset内边框须置最前，且圆角下spread不宜超border-radius值。
直接用 box-shadow 实现多重边框最省事，但必须理解它不是真边框——不占布局空间、不响应 border-radius、不能设虚线，只是视觉替代方案。
box-shadow 多层写法顺序和 spread 值怎么算？
逗号分隔多层阴影，顺序从内到外；每层的 spread-radius 是**累积值**，不是单层厚度。
- 要实现三圈各宽
3px的实线边框，得写成：box-shadow: 0 0 0 3px #333, 0 0 0 6px #eee, 0 0 0 9px #999; - 写成
3px, 4px, 5px就错了：第二层4px会覆盖第一层，实际只有最外层可见 - 内边框用
inset，且必须放在最前面：box-shadow: inset 0 0 0 2px #666, 0 0 0 4px #ccc;
圆角下 box-shadow 边框断裂怎么办？
当元素有 border-radius 时，box-shadow 默认不跟随弯曲，边缘容易露直角或断裂。
- 安全做法是让某层的
spread≤border-radius值（例如border-radius: 6px，则该层spread不超过6px） - 若需更厚外框又保圆角，改用伪元素方案（
::before+position: absolute+inset: 0） - 移动端 Safari 13–14.4 对
inset多层支持不稳定，此时伪元素是唯一可靠选择
为什么 outline 不适合叠加多重边框？
outline 看似能“加一层”，但它和 border 渲染逻辑不同，无法真正叠加出可控的多重效果。
- 一个元素只能有一个
outline，没法像box-shadow那样逗号分层 -
outline不响应border-radius，哪怕盒子是圆角，它仍是直角矩形 -
outline-offset: 0在 subpixel 缩放下常有 1px 抖动，尤其在高 DPR 屏幕上明显 - 无法混合样式，比如外圈虚线 + 内圈实线 ——
outline-style只能统一设一种
真正需要独立交互（如 hover 仅触发外圈）、或要应用不同 transform/filter 时，box-shadow 就不够用了。这时候得回到伪元素，而不是硬凑 outline 或嵌套 div —— 那些方案要么破坏语义，要么失控点太多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
