直接写两条 border 无效，因后声明会覆盖前一条；可用 outline+border（outline-offset 控制间距）或 box-shadow（支持圆角、内边框、Retina 适配）实现双边框，但需注意可访问性、禁用态和深色模式适配。
为什么
直接写 border: 2px solid #333; border: 1px dashed red; 不会生效——CSS 后声明的 border 会完全覆盖前一个，浏览器只认最后一条。双边框不是“叠加”，而是需要用不同层的描边机制来实现。
用 outline + border 实现真正可用的双边框
这是最稳定、兼容性最好（IE8+）、不破坏盒模型的方案。关键在于：border 占布局空间，outline 绘制在外围且不占空间，二者互不干扰。
-
border设主边框：宽度、样式、颜色都明确指定，比如border: 2px solid #007BFF; -
outline设第二层：必须加outline-offset控制间距，否则会紧贴主边框，例如outline: 2px dashed #6c757d; outline-offset: 4px; - 注意：
outline不支持border-radius，所以圆角只靠border-radius控制主边框，outline仍是直角——这是它和box-shadow的本质区别
用 box-shadow 模拟更灵活的双线/内边框
当需要圆角双线、内凹效果或响应式细线时，box-shadow 更可控，尤其适合高清屏适配。
- 外双线：两个
box-shadow值，例如box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;（两圈同心描边） - 内边框：用
inset关键字，如box-shadow: inset 0 0 0 2px #e9ecef; - Retina 屏下避免写
0.5px边框：改用box-shadow: 0 0 0 1px #ddd;，渲染更准且不触发缩放 - 注意：
box-shadow不影响border-radius生效，但多层阴影会增加重绘开销，简单按钮别堆超过 3 层
哪些场景不该用双边框？
双边框是视觉强化手段，不是默认选项。容易被忽略但影响体验的关键点：
立即学习“前端免费学习笔记（深入）”；
- 可访问性：WCAG 要求焦点态必须清晰可见。如果用
outline做第二层边框，记得重置默认聚焦outline，否则键盘用户会看到两层重叠虚线 - 禁用态（
disabled）：双边框在opacity: 0.6下容易糊成一团，建议此时只保留主border，outline或box-shadow全部移除 - 深色模式适配：硬编码颜色如
#000和#fff在深色背景下可能反色失效，优先用color-scheme: light dark;配合prefers-color-scheme媒体查询
