box-shadow可模拟多重边框但非真边框，不占布局、不响应border-radius、不支持虚线；三重边框需用0 0 0 npx color逗号分隔，按内到外顺序设置扩展值，避免覆盖；内边框用inset，发光效果调模糊值；outline因渲染逻辑差异不适合作为第二层边框；伪元素方案需relative定位+absolute填满+负偏移扩边+z-index分层；圆角下box-shadow易断裂，应使spread≤border-radius或改用伪元素；交互热区等复杂场景必须用伪元素。
box-shadow 模拟多重边框最省事，但必须理解它不是真边框——不占布局空间、不响应 border-radius、不能设虚线，只是视觉替代方案。
用 box-shadow 实现三重边框的写法
核心是逗号分隔多层阴影，每层用 0 0 0 Npx color 表达“无偏移 + 无模糊 + 扩展 Npx”，顺序从内到外排列：box-shadow: 0 0 0 2px #333, 0 0 0 6px #eee, 0 0 0 10px #999;
这表示三层同心环，实际宽度分别是 2px、4px（6−2）、4px（10−6）。别写成 2px, 4px, 6px，否则外层会覆盖内层视觉。
- 要加内边框？用
inset：比如inset 0 0 0 2px #666放在最前面 - 想让外层带微弱发光？把某一层的模糊值设为非零，比如
0 0 4px 8px rgba(0,0,0,0.1) - 移动端 Safari 13–14.4 对
inset多层支持不稳定，此时必须换伪元素
为什么 outline 不能当第二层边框用
outline 和 border 渲染逻辑完全不同：它不占布局空间、不随 border-radius 弯曲、无法控制 offset 精确距离，且浏览器间存在 1px 渲染偏差。常见翻车场景：
-
border: 2px solid #000; outline: 3px solid #f00;→ 红色 outline 在不同缩放比例下会“抖动”或粘连黑边 - 圆角容器上加
outline→ outline 仍是直角矩形，视觉割裂 - 想 hover 时只高亮外圈？
outline无法独立触发，只能靠 class 切换整个元素状态
伪元素方案中 ::before 定位的关键参数
要用 ::before 画外层边框，父元素必须设 position: relative，伪元素本身必须满足四个条件才不会塌陷：
- 必须有
content: ""，否则不渲染 - 设
position: absolute，再用top: 0; left: 0; right: 0; bottom: 0;填满内容区 - 若要外扩，用负偏移：比如
top: -3px; left: -3px; right: -3px; bottom: -3px;，数值等于期望边框宽度 - 记得加
z-index: -1，否则可能盖住内容；如果还要叠加第三层，::after就得设更低的z-index
圆角多重边框最容易被忽略的断裂点
当元素有 border-radius: 12px，而你用 box-shadow 叠加三层边框时，外层阴影边缘容易出现像素级直角断裂——这不是 bug，是浏览器对扩展半径和圆角弧度的合成误差。解决办法只有两个：
- 所有
box-shadow层的spread-radius必须 ≤border-radius值（比如border-radius: 8px，最大 spread 写8px） - 或者放弃
box-shadow，改用伪元素并给每个伪元素单独设border-radius，这样每层都能精确弯曲
box-shadow 的“假边框”属性会立刻暴露短板——这时候伪元素不是备选，而是唯一能落地的方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
