最可靠方式是用::before和::after伪元素叠加实现多重边框：本体border为none，::before画外层边框（z-index低、尺寸略大），::after画内层边框（z-index高、尺寸略小），父容器需position: relative，且伪元素必须设content: ""。
用 ::before 和 ::after 叠加实现多重边框
纯 CSS 实现多重边框最可靠的方式，就是利用两个伪元素分别渲染一层边框，再通过 position: absolute 偏移控制间距。元素本体只负责内容，不画边框。
常见错误是直接给元素设 border 再叠加伪元素边框，结果三层重叠、错位或遮挡内容。正确做法是让本体边框为 none，所有边框都由伪元素承担。
-
::before画外层边框（比如 3px solid #333），z-index设低，尺寸略大 -
::after画内层边框（比如 2px dashed #999），z-index设高，尺寸略小 - 父容器需设
position: relative，否则伪元素会相对 body 定位 - 伪元素必须设
content: ""，否则不渲染
为什么不用 box-shadow 模拟多重边框
box-shadow 确实能用多层阴影“假装”边框，但本质不是边框：它不占布局空间、无法设置虚线/双线、圆角表现生硬，且在缩放或 transform 下易糊。
典型翻车场景：需要响应式缩放时，box-shadow 的像素值不会随缩放等比变化；需要和 outline 或其他边框类样式共存时，层叠顺序难控。
立即学习“前端免费学习笔记（深入）”；
- 虚线边框？
box-shadow不支持border-style语法，只能靠渐变模拟，复杂且不可维护 - 要精确控制内外边距间隙？
box-shadow的spread是均匀扩展，无法实现“外宽内窄”的非对称效果 - 兼容性倒没问题，IE9+ 都支持，但 Safari 对多层
box-shadow的性能消耗明显高于伪元素
border-image 能不能一劳永逸
理论上可以，但实际限制太多——你需要一张精准切分的九宫格图片，或写复杂的 linear-gradient 拼接，维护成本远高于伪元素方案。
更现实的问题是：当元素尺寸动态变化（比如响应式宽度、flex 自适应），border-image-slice 很难保证四角不拉伸变形；而且 border-image 不支持 border-radius 的平滑过渡，边缘常出现锯齿或断裂。
- 如果真要用，优先选 SVG 作为
border-image-source，比 PNG 更清晰 -
border-image-slice必须带fill关键字才能显示中间区域，漏写就只剩四条线 - 调试困难：浏览器开发者工具里，
border-image的预览极不直观，出问题基本靠猜
移动端适配和性能注意点
伪元素方案在移动端最大的坑是高 DPR（如 iPhone 的 2x/3x 屏）下边框发虚——因为 1px 被渲染成 2 或 3 物理像素，但没做适配处理。
解决办法不是盲目放大边框，而是用 transform: scale(0.5) 配合 transform-origin 居中缩放伪元素，让它在高 DPR 下仍保持 1 物理像素粗细。
- 避免在大量列表项上无差别使用该方案，每个元素额外创建两个伪元素，DOM 节点数翻三倍
- 动画边框时，优先 animating
opacity或transform，别 animatingborder-width，后者强制重排版 - 若需支持 iOS Safari 旧版本（::before/
::after在display: flex容器里的定位是否正常，必要时加flex-shrink: 0
pointer-events: none——如果不加，它们可能拦截鼠标事件，导致点击穿透失效或表单聚焦异常。 
