最可靠纯CSS双重边框实现是用border+box-shadow组合：内层用border，外层用无模糊的box-shadow；box-shadow自动适配border-radius，兼容Bootstrap工具类，响应式需媒体查询手动调整。
用 box-shadow 模拟双重边框最可靠
纯 css 实现双重边框，border 本身不支持双线嵌套（border-style: double 是单条双线，不是内外两层），所以得绕道。最稳的方式是用 box-shadow 叠一层外边框，配合原生 border 做内边框。
好处是完全兼容 Bootstrap 现有类（比如 .p-3、.rounded），不干扰栅格和响应式逻辑；缺点是阴影不参与布局计算，若需精确留白得手动调 padding 或 margin。
-
box-shadow: 0 0 0 2px #007bff, 0 0 0 6px #e9ecef;—— 内圈蓝边 + 外圈浅灰边，两层等宽不模糊 - 避免用
blur值（如2px 2px 4px），否则边缘发虚，不像“边框” - 如果 div 有
border-radius，box-shadow会自动跟随圆角，无需额外处理
别碰 outline + border 组合
看似能凑出两层线，但 outline 不占空间、不随 border-radius 弯曲、在聚焦态会意外触发（尤其表单内嵌时），Bootstrap 的 :focus-visible 样式还可能覆盖它。
常见翻车场景：
- 鼠标点击后突然多出一圈虚线（
outline默认聚焦样式） - 圆角容器上，
outline仍是直角矩形 - 用
outline-offset调位置，但在 Safari 下行为不一致
Bootstrap 5 的 border- 工具类不够用
像 border border-primary 或 border-2 只能控制单层边框的粗细/颜色/样式，没法声明“再加一层”。强行叠加多个 border- 类无效——CSS 层叠规则下，后声明的 border 会完全覆盖前一个。
正确做法是放弃依赖工具类设边框，改用自定义 class：
.dual-border {
border: 2px solid #007bff;
box-shadow: 0 0 0 4px #f8f9fa;
}
然后在 HTML 里写 <div class="dual-border p-3">，保留 Bootstrap 的间距、背景等工具类。
<h3>需要响应式双框？用媒体查询微调 <code>box-shadow 宽度
小屏下 4px 外框可能太抢眼，大屏又显得单薄。直接在 CSS 里按断点缩放：
@media (max-width: 768px) {
.dual-border {
box-shadow: 0 0 0 2px #f8f9fa;
}
}
@media (min-width: 769px) {
.dual-border {
box-shadow: 0 0 0 6px #f8f9fa;
}
}
注意：不要试图用 Bootstrap 的 border-sm-* 等响应式边框类替代，它们只作用于 border，对 box-shadow 无影响。
真正麻烦的是当这个 div 同时要加 drop-shadow（比如卡片浮起效果）或 filter: blur() 时，box-shadow 会被一并模糊——这种复合效果必须用伪元素重写，但那就超出“双重边框”的原始需求了。
