outline 不影响布局但不随 border-radius 变圆；它始终为矩形，会突兀框在圆角外侧，推荐用 box-shadow 替代或配合 outline-offset 微调，兼顾可访问性与视觉一致性。
outline 不影响布局，但默认不随元素圆角变化
outline 确实不会触发重排（reflow），因为它绘制在元素盒模型之外，不参与尺寸计算——这是它替代 border 防止撑开容器的核心优势。但要注意：outline 始终是矩形，即使元素设置了 border-radius，outline 也不会跟着变圆，会突兀地“框”在圆角外侧。
常见错误现象：给一个 border-radius: 8px 的按钮加 outline: 2px solid blue，焦点状态下 outline 明显超出视觉边界，甚至遮挡相邻元素。
- 若需视觉一致性，优先用
box-shadow: 0 0 0 2px blue替代 outline，它能响应border-radius - 必须用 outline 时（如可访问性焦点样式），建议配合
outline-offset微调位置，例如outline-offset: -2px可让 outline 向内收一点（但无法真正“贴合”圆角） - 不要依赖
outline: none彻底移除焦点样式——这会损害键盘用户可访问性；应重置为更可控的box-shadow或带 offset 的 outline
focus 状态下 outline 撑开父容器？那大概率是:focus-visible 未生效或伪类顺序错了
outline 本身绝不会导致父容器尺寸变化，但如果看到“加了 outline 后父容器高度/宽度微增”，真实原因通常是：
- 元素原本有
border，你用outline替换时没同时清除 border，导致两者叠加显示 - CSS 伪类顺序错误，比如把
:focus写在:hover后面，而 hover 样式里动了 padding/margin，造成错觉 - 浏览器自动添加的默认 outline（如 Chrome 对
button的焦点 outline）与自定义样式冲突，建议显式重置：outline: 2px solid #007bff; outline-offset: 2px; - 部分旧版 Safari 对
outline渲染有轻微布局扰动（极少见），可用transform: translateZ(0)强制硬件加速规避
outline 和 border 在键盘导航与打印样式中的行为差异
outline 的设计初衷就是作为“非侵入式焦点指示器”，这决定了它和 border 的根本区别：
-
border会出现在打印样式中（除非显式设@media print { border: none; }），而outline默认不打印 -
outline在 Windows 高对比度模式下可能被系统强制覆盖，border 则更稳定；如需兼容，建议用box-shadow+prefers-contrast媒体查询兜底 - 键盘聚焦时，
:focus-visible是比:focus更精准的钩子，避免鼠标点击后误触 outline；应写作：button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } - 移动端 Safari 对 outline 支持较弱，且 iOS 键盘聚焦常不触发 :focus-visible；此时可结合
data-focus-visible-added手动标记（通过 focus-visible 库）
真正防撑开的稳妥方案：outline + outline-offset + box-shadow 组合技
单靠 outline 并不能解决所有视觉与兼容问题。生产环境推荐分层处理：
- 基础层：用
outline: none清除默认 outline - 可访问层：对
:focus-visible应用outline: 2px solid #007bff; outline-offset: 2px; - 视觉层：对所有
:focus（含鼠标点击）补充box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);，它既圆滑又不影响布局 - 降级层：针对不支持
:focus-visible的浏览器，用@supports not selector(:focus-visible) { button:focus { ... } }回退
复杂点在于，outline-offset 的像素值必须与 shadow 的 spread 值协调——否则视觉上会显得“双线”或错位。最容易被忽略的是：不同设备像素比（dpr）下，1px outline 可能渲染为模糊线，建议始终用 2px 起步并搭配 backface-visibility: hidden 防抗锯齿失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
