outline不能当外边框用，因其不占布局空间、无法独立控制偏移、默认仅在focus状态显示且本质是可访问性焦点指示器；可靠方案是用box-shadow模拟虚线外边框。
outline 为什么不能当“外边框”用
直接用 outline 模拟按钮虚线外边框，多数时候是错的——它不占布局空间、无法控制 offset（偏移量）、默认跟随焦点触发，且在 focus 状态下才显眼。你想要的是视觉上“围在按钮外面一圈”的虚线，outline 本质是辅助可访问性的焦点指示器，不是装饰性边框。
真正可靠的虚线外边框：用 outline-offset + outline-style
如果坚持用 outline 实现（比如需要保持焦点可见性），必须显式设置 outline-offset 控制距离，并禁用浏览器默认 focus 样式干扰：
-
outline默认值因浏览器而异（Chrome 常为2px dotted ButtonText），务必重写全部三属性：outline-style、outline-width、outline-color -
outline-offset: 4px才能让虚线“浮”在按钮外侧；负值会让它缩进甚至遮盖内容 - 必须搭配
outline: none在:focus-visible之外清掉默认焦点样式，否则双 outline 叠加难看
button {
outline: 2px dashed #666;
outline-offset: 4px;
}
button:focus-visible {
outline: 2px dashed #007bff;
}更推荐：box-shadow 模拟虚线外边框
box-shadow 更可控、无焦点耦合、支持多层、能精确控制虚实和距离，是实际项目中更稳妥的选择：
-
box-shadow: 0 0 0 2px dashed #666中的第四个长度值（2px）即虚线宽度，第五个值（dashed）控制线型 - 要“仅外边框”，必须设
blur-radius和spread-radius为 0，即0 0 0 Npx格式 - 支持同时定义多个 shadow，比如加一层内阴影强调按钮立体感：
inset 0 1px 2px rgba(0,0,0,0.1) - 注意：IE10+ 支持，但 IE 不支持
dashed在box-shadow中（会降级为 solid），需 fallback
button {
box-shadow: 0 0 0 2px dashed #666;
}
/* IE fallback */
@supports not (box-shadow: 0 0 0 1px dashed) {
button {
border: 2px dashed #666;
margin: -2px; /* 抵消 border 占位 */
}
}outline 定位流程：它根本不参与定位流
outline 没有定位流程——它不触发重排（reflow），不改变文档流，也不响应 position、top/left 或 transform。它的绘制发生在元素绘制完成之后，纯属“画上去”的图层，位置只由 outline-offset 相对于元素边界偏移决定。想靠 outline 做精准对齐或动画位移？做不到。真要动，只能用 box-shadow 配合 transform 或绝对定位容器。
立即学习“前端免费学习笔记（深入）”；
