最简双重边框可用border+outline实现：border设内层边框，outline设外层边框并配outline-offset:0确保紧贴；伪元素方案则通过::before和::after绝对定位实现更灵活的双线控制，box-shadow因模糊、不可控且非真边框而不推荐。
直接用 border + outline 实现最简双重边框
不需要额外 HTML 或伪元素，border 和 outline 是浏览器原生支持的双层边框方案。两者互不干扰、可独立设置颜色/宽度/样式，且不会影响布局（outline 不占空间）。
-
border放在内层，控制按钮主体边框；outline放在外层，紧贴 border 外缘 - 必须显式设置
outline-offset: 0，否则默认有偏移，看起来不是“紧挨着”的双重效果 - 注意：
outline在 Firefox 中默认会随 focus 状态自动出现，需加outline: none并仅在 hover 或 active 时手动启用 - 示例：
border: 2px solid #333; outline: 2px solid #666; outline-offset: 0;
用 ::before 和 ::after 伪元素做可控双线边框
当需要更灵活的控制（比如只显示上下/左右双线、错位、不同动画）时，伪元素是可靠选择。核心是两个绝对定位的伪元素分别模拟内外边框。
- 两个伪元素都设
content: ""、position: absolute，覆盖按钮四边 - 外层伪元素（如
::before）用inset: -2px拓展出外边框，内层（::after）用inset: 0贴合原有边界 - 避免用
box-shadow模拟——它本质是投影，边缘模糊、无法精确控制线条粗细和接缝 - 必须给按钮设
position: relative，否则伪元素会相对于 body 定位
为什么不用 box-shadow 模拟双重边框
box-shadow 看似能用多层阴影伪造双线，但实际问题明显：
- 阴影是柔化渲染，即使
blur-radius: 0，在高 DPI 屏幕上仍可能出现亚像素模糊，线条不锐利 - 无法单独控制某一边（比如只要上+下双线），
box-shadow是全向扩展 - 与真实边框的盒模型行为不一致：比如设置
border-radius后，box-shadow的圆角是近似值，常出现微小错位 - 调试困难：开发者工具里看不到“边框”结构，只有 shadow 列表，不易排查样式冲突
兼容性和易踩坑点
双重边框看似简单，但跨浏览器表现差异容易被忽略：
立即学习“前端免费学习笔记（深入）”；
-
outline在旧版 Safari（≤14）中不支持outline-style: double，但solid是安全的 - 伪元素方案在 IE11 中完全可用，但需确保没用到
inset（IE 不支持），改用top/left/right/bottom手动计算偏移 - 如果按钮用了
border-radius，双重边框的圆角衔接是否自然？outline会自动跟随，而伪元素需同步设置相同border-radius值 - 移动端点击时，
outline可能触发系统高亮（尤其 iOS Safari），建议配合-webkit-tap-highlight-color: transparent
border+outline 最轻量——选哪个，取决于你是否需要响应 hover 或适配老浏览器。 
