border + outline 实现双色边框的原理
CSS 里没有原生“双色边框”属性，但 border 和 outline 天然处于不同盒模型层（border 在 content/padding/border 盒内，outline 在 border 盒外），叠加后视觉上就是两条独立边框。关键在于它们互不干扰、可分别设色、宽度和样式。
注意：outline 不占布局空间，不会触发重排；border 会参与盒尺寸计算。所以用 outline 做外圈更安全，尤其在响应式或 flex/grid 场景下。
怎么让 outline 紧贴 border 不偏移
默认 outline 有浏览器内置的 outline-offset（多数为 0，但 Safari 有时有微小默认值），导致它看起来“浮空”或错位。必须显式设为 outline-offset: 0 才能严丝合缝。
-
outline必须声明outline-style（如solid），否则即使设了 color/width 也不显示 -
outline-width不能用百分比或 em，只接受绝对长度（px、rem等） - 若父容器有
transform或filter，部分旧版 Chrome 可能导致 outline 渲染错位，此时改用box-shadow替代更稳
示例：
立即学习“前端免费学习笔记（深入）”；
.dual-border {
border: 2px solid #3b82f6;
outline: 3px solid #ef4444;
outline-offset: 0;
}outline 在 focus 状态下意外出现怎么办
outline 默认会在元素获得焦点（比如键盘 tab 进来）时显示，且浏览器可能覆盖你写的颜色——这是可访问性机制，不能直接删。如果只想在非交互状态下展示双色边框，得隔离状态：
- 把双色效果写在非
:focus的普通类里（如.dual-border），避免和焦点 outline 混用 - 若必须用
:focus触发双色，则额外加outline: none到:focus以外的所有状态，再单独定义:focus的border+outline - 切勿全局写
* { outline: none }—— 这会破坏键盘用户导航，违反 WCAG
border + outline 的兼容性与渲染差异
IE 8+、Edge 12+、所有现代 Chrome/Firefox/Safari 都支持，但 Safari 对 outline 的抗锯齿处理略弱，细线（1px）在高分屏下可能发虚；Firefox 在 border-radius 较大时，outline 仍保持直角，和圆角 border 不匹配。
- 要圆角双色边框？改用
box-shadow: 0 0 0 2px #3b82f6, 0 0 0 5px #ef4444，它会跟随 border-radius -
outline不支持border-image或渐变，而box-shadow也不支持，真要渐变边框只能用background+mask或伪元素 - 动画
outline-color是支持的，但outline-width无法平滑过渡（浏览器不支持该属性的 transition）
真正难搞的是当容器有 overflow: hidden 且 outline 超出边界时——outline 不会被裁剪，会漏出来。这时候只能换方案。
