伪元素边框堆叠本质是通过position、z-index和box-sizing协同控制多层定位盒子的尺寸与层级，浏览器仅渲染一个::before和一个::after，需统一border-radius、避免inset兼容性问题，并严格对齐各层参数。
伪元素边框堆叠的本质是层叠上下文控制
不是靠“多写几个 ::before 就能叠出复杂边框”，而是靠 position、z-index 和 box-sizing 协同控制三层（或更多）定位盒子的尺寸与层级。浏览器只渲染两个伪元素，再多的 ::before 或 ::after 会被覆盖——CSS 规范明确限定每个元素最多一个 ::before 和一个 ::after。
常见错误现象：z-index 不生效、外层边框被内层裁剪、圆角错位、响应式下边框断裂。
- 父容器必须设
position: relative，否则伪元素的absolute定位会脱离预期锚点 - 所有伪元素统一用
box-sizing: border-box，避免width/height+border导致尺寸溢出 - 边框宽度差异直接决定层间间距：比如主元素
border: 2px，::before设border: 6px，那它就自然比主框宽出 4px（每边 2px）
三层边框的最小可靠结构（含内外偏移）
要实现“主边框 + 外发光 + 内压边”这类效果，三个视觉层实际由：主元素自身边框 + ::before（最外层）+ ::after（紧贴内容的内层）构成。关键在尺寸递进和负偏移配合。
使用场景：卡片悬停强化、表单输入框焦点态、设计系统中的强调容器。
立即学习“前端免费学习笔记（深入）”；
-
::before：设大尺寸、低z-index，用transform: scale(1.02)或top: -2px; left: -2px微调外扩 - 主元素：保留
border，但background-clip: padding-box防止背景侵入边框区 -
::after：inset: 1px+border: 1px solid，再加z-index: 1确保压在主内容上
button {
position: relative;
border: 2px solid #333;
background-clip: padding-box;
}
button::before {
content: "";
position: absolute;
inset: -4px;
border: 4px solid #ff6b6b;
z-index: -1;
}
button::after {
content: "";
position: absolute;
inset: 1px;
border: 1px solid rgba(0,0,0,0.1);
z-index: 1;
}
圆角多层边框对齐失败的根因和解法
当主元素设 border-radius: 8px，伪元素没同步设相同值，就会出现“外框圆角大、内框直角”或“角部撕裂”。这不是渲染 bug，而是每个盒子独立计算圆角弧度的结果。
性能影响：过度嵌套 border-radius + overflow: hidden 在低端安卓 WebView 中可能触发重绘卡顿。
- 所有参与堆叠的层（主元素、
::before、::after）必须显式声明相同border-radius值 - 避免用
%或em单位设圆角——不同盒模型下解析不一致，统一用px - 如果某层需“更圆润”，不要加大
border-radius，改用clip-path: inset(0 round 10px)独立控制裁切
IE11 及旧版 Safari 的兼容性断点
::before 和 ::after 在 IE11 支持良好，但 inset（即 top/right/bottom/left 合写）不被识别；Safari ≤ 14 对 transform: scale() 应用于伪元素时存在边框像素化问题。
错误信息典型表现：Property 'inset' ignored（DevTools 警告）、圆角锯齿、伪元素完全不显示。
- 替代
inset: -2px：老老实实写top: -2px; right: -2px; bottom: -2px; left: -2px - 避免在伪元素上用
scale()控制大小，改用width/height+margin微调 - 旧 Safari 下若出现边框虚化，给伪元素加
backface-visibility: hidden
真正麻烦的从来不是写几层 ::before，而是每一层的 box-sizing、inset 偏移、border-radius 和 z-index 必须严格对齐——差 1px，视觉就脱节。
