box-shadow和outline各有局限，伪元素才是可靠方案；box-shadow多层易糊边因blur过大或spread未控，outline会溢出布局且不参与盒模型计算，伪元素可精准控制每层样式与定位。
box-shadow 是最简方案，但容易叠出糊边或错层；outline 只能双层且会溢出布局——别硬凑，先看场景再选。
box-shadow 多层叠加时为什么看起来只有一层？
常见错误是把模糊值（blur）设得太大，或者没控制好 spread 和 blur 的关系。比如 box-shadow: 0 0 2px red, 0 0 4px blue，两层阴影都从同一位置向外发散、边缘严重重叠，人眼分辨不出层次。
- 要实现清晰分层，blur 必须为
0，靠 spread 值拉开距离：如0 0 0 2px red, 0 0 0 6px blue - 顺序很重要：逗号左侧的 shadow 在上层，右侧在下层；想让蓝边包住红边，就得把红边写前面
- spread 为负数（如
-2px）会向内收缩，但超出 content 区后会被裁剪，且受overflow: hidden限制 - iOS Safari 对超过 3 层的
box-shadow有渲染抖动，动画中尤其明显
outline + border 组合为什么常导致布局错位？
outline 不参与盒模型计算，也不影响元素尺寸，但它会“画”在元素外侧，且不避让相邻元素——所以它会和兄弟元素重叠，甚至盖住文字或图标。
- 典型踩坑：
border: 2px solid #333; outline: 2px solid #ff6b6b;看起来像 4px 边框，但实际是两层独立描边，没有间隙 - 无法单独控制某一边的 outline（比如只要 top outline），
outline只能全方向生效 - IE8 及更早版本不支持
outline，虽现在少见，但金融/政企内网环境仍可能遇到 - 如果父容器有
overflow: hidden，outline 会被裁掉——这不是 bug，是规范行为
什么时候该放弃 box-shadow / outline，改用伪元素？
当你要：① 控制每层边框的圆角对齐；② 实现内边框+外边框+发光；③ 避免 iOS 渲染抖动；④ 需要 hover 动态增减某一层时——::before 和 ::after 就成了唯一可靠选择。
- 父元素必须设
position: relative，否则伪元素会相对 body 定位 - 所有层统一用
box-sizing: border-box，避免因 border 导致尺寸失控 - 三层结构推荐写法：
element（无 border）→::before（外层，inset: -4px,z-index: -1）→::after（内层，inset: 1px,z-index: 1） - 圆角必须每层显式声明相同
border-radius，否则会出现“外圆内方”的撕裂感
真正难的不是写出多层边框，而是让它们在不同缩放、不同设备、不同交互状态下保持视觉一致——box-shadow 看似一行代码搞定，但模糊值一变、设备一换，就可能糊成一团；outline 简单直接，却在布局边界上毫无商量余地。选哪种，得先问清楚：这层边框，到底是要“被看见”，还是“被计算”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
