用::before模拟外边框需设position: absolute、content: ""、宽高各增2×(原边框+间隙+外边框)、top/left各负半值，并同步border-radius；老浏览器须设display: block，z-index需配合父层叠上下文控制。
before伪元素怎么套在border外面
直接用 ::before 模拟外边框，核心是让它比原元素大一圈，再用 border 画线。不能靠 outline（不占布局、无法控制粗细和圆角），也不能靠多层 box-shadow（模糊、不精准、吃性能）。
常见错误：把 ::before 定位成 top: 0; left: 0，结果完全盖住原边框，看不出“双重”；或者忘了设 content: ""，伪元素压根不渲染。
- 父容器必须设
position: relative，否则::before会相对于 body 定位 -
::before要设position: absolute，然后用负的top/left和正的width/height扩出去（比如宽高各 +4px，top/left 各 -2px） - 边框颜色、粗细、圆角（
border-radius）要和原元素显式对齐，否则视觉错位
双重边框的尺寸和偏移怎么算才不糊
关键不是“加多少”，而是“让两层边框视觉上分离但又对齐”。比如原边框是 2px solid #333，想加一层外边框，就不能简单 top: -2px —— 那会让外边框内边缘贴着原边框外边缘，看起来像加粗，不是“双线”。
真正有效的做法是留出间隙：假设你想要 2px 原边框 + 2px 间隙 + 2px 外边框，那 ::before 就该比原元素宽高各 +8px（2+2+2+2），再用 top: -4px; left: -4px 居中撑开。
- 公式：外层偏移 = (原border宽度 + 间隙 + 外border宽度) / 2
- 如果间隙为 0，两层边框紧挨，视觉上就是单边框变粗，不是双重效果
- 圆角要同步设置：
border-radius: 6px必须同时写在原元素和::before上，否则外层直角、内层圆角会露馅
IE11 或旧版 Safari 下 ::before 不显示边框？
不是伪元素不支持，是 display 默认值惹的祸。::before 在老浏览器里默认是 display: inline，而 inline 元素不响应 width、height、border。
错误写法：::before { border: 2px solid red; } —— 没设 display，边框根本不会画出来。
- 必须显式声明
display: block或display: inline-block - IE11 不支持
display: flow-root，别用 - 如果用了
transform: scale()做缩放适配，老 Safari 可能导致边框像素发虚，优先用width/height + top/left
用绝对定位叠加装饰层时 z-index 容易乱
你以为 ::before 天然在底层？错。它的堆叠上下文取决于父元素是否创建了新层（比如有 opacity 、transform、will-change）。一旦父元素触发了层叠上下文，::before 的 z-index 就只在那个局部上下文中生效。
典型现象：按钮上加了双重边框，但 hover 时图标或文字突然盖住了外边框 —— 很可能是图标用了 transform，悄悄建了新层。
- 最稳方案：给父元素加
z-index: 0（触发层叠上下文但不改变顺序），再给::before设z-index: -1 - 避免在同一个父容器里混用
transform和::before装饰，容易意外隔离堆叠上下文 - 调试时用浏览器开发者工具的“Layers”面板看实际分层，别猜
复杂点在于：双重边框不是纯装饰，它参与视觉节奏和可访问性感知。比如外边框太细、颜色对比度不够，在高对比度模式下可能消失；或者用 box-shadow 替代时，打印样式表里会被忽略。这些细节没显式写进 CSS，就很容易被漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
