box-shadow实现多重边框时阴影默认外向绘制且不参与文档流，易遮挡相邻元素；需禁用overflow:hidden以防裁剪，无法混合inset与非inset；伪元素方案需父元素relative、伪元素absolute并精确控制尺寸与定位。
box-shadow 实现多重边框时的层叠顺序问题
用 box-shadow 叠加多层边框，看似简单，但阴影默认从外向内绘制，且不参与文档流——这意味着它会盖住相邻元素的 border 或内容，尤其在 z-index 为 auto 的父容器里容易“溢出遮挡”。
- 要让阴影只向外扩展不干扰布局，必须确保元素本身没有
overflow: hidden（否则阴影会被裁掉） - 如果需要内侧边框效果，
box-shadow无法实现负值“内阴影 + 外阴影”混合（inset和非inset不能共存于同一声明） - 推荐写法：
box-shadow: 0 0 0 2px #000, 0 0 0 4px #ccc, 0 0 0 6px #999—— 每层用相同模糊值0和偏移0，靠扩展半径控制粗细
::before / ::after 伪元素加边框的定位陷阱
伪元素模拟多重边框更可控，但常见错误是忘记设置 position: absolute 和显式尺寸，导致伪元素塌陷或错位。
- 父元素必须设
position: relative，否则::before会相对于最近定位祖先定位，可能飞出可视区 - 伪元素需设
content: ""、top: 0、left: 0、right: 0、bottom: 0，再用border或box-shadow绘制边框 - 若父元素有 padding，伪元素默认撑满 content box，要加
box-sizing: border-box避免尺寸计算偏差 - 示例：
div { position: relative; }<br>div::before { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; content: ""; border: 2px solid #000; }
box-shadow 与伪元素方案的性能和兼容性差异
box-shadow 方案在低端 android webview 或旧版 safari（
-
box-shadow：纯绘制，GPU 加速友好，但每多一层阴影，浏览器需额外合成一层纹理，Chrome 中超过 5 层可能触发layer溢出警告 - 伪元素：可精确控制每层边框的圆角、虚实线型（
border-style），但每个伪元素都是一次 layout 计算，频繁动画时慎用 - 移动端真机测试重点看 iOS Safari 13–14.4：
box-shadow的inset行为不稳定，此时伪元素是唯一可靠选择
圆角多重边框下 border-radius 与 box-shadow 的断裂风险
当元素设了 border-radius，仅靠 box-shadow 模拟多层边框时，外层阴影不会自动继承圆角弧度，边缘会出现生硬直角或像素级断裂。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：
box-shadow的圆角由元素自身border-radius决定，但多层阴影叠加时，中间层可能因半径计算误差露出尖角 - 解法一：所有
box-shadow层统一用相同扩展值，例如border-radius: 8px对应box-shadow: 0 0 0 2px #000, 0 0 0 4px #ccc，避免混用不同扩展量 - 解法二：改用伪元素，每个伪元素单独设
border-radius: inherit，并用transform: scale()微调缩放比例来对齐弧度（需配合will-change: transform防卡顿）
实际项目里最常被忽略的是：伪元素的 z-index 默认为 auto，若父元素没设 z-index，多层伪元素之间层叠顺序不可控——这时候得给每一层明确设 z-index，哪怕只是 1、2、3。