outline不占据布局空间，故不触发重排，但可能被overflow:hidden裁剪；它属于绘制层行为，仅重绘不重排，且在焦点指示等场景中不可替代。
Outline 确实不占据布局空间，但“不占据”不等于“不可见”或“不影响渲染”——它不触发重排（reflow），但可能被父容器的 overflow: hidden 剪裁，这是最常被忽略的矛盾点。
outline 不引起 reflow 的根本原因
浏览器在计算布局（layout）阶段只处理属于盒模型的属性：border、padding、margin、width/height。而 outline 是纯绘制层（paint layer）行为，发生在 layout 之后、paint 之前。
-
outline改变时，浏览器跳过 layout 阶段，直接重绘 outline 区域 -
border-width变化会改变元素的offsetWidth和offsetHeight，强制触发 layout - 即使设
outline-offset: -5px向内偏移，也不会压缩内容区或挤压相邻元素
为什么有时候 outline “看不见”了
视觉上消失 ≠ 没渲染。常见真实场景是：outline 被父级容器裁剪，而非“没画出来”。
- 父元素设置了
overflow: hidden，而outline绘制在 border 外围，自然被截断 - 表格（
table）单元格或display: inline元素换行后，outline 本应包裹多个 fragment box，但部分浏览器（如旧版 Safari）渲染不全 -
outline-offset为负值时，outline 可能叠在文字或背景色上，造成“隐形”，实际只是 z-index 层级或颜色对比度问题
border 和 outline 在 focus 状态下的行为差异
表单控件（如 input、button）默认 focus 样式由 outline 实现，不是 border —— 这是可访问性的硬性要求。
- 键盘 Tab 导航时，
outline自动出现；鼠标点击后，outline默认仍保留（除非显式设outline: none） -
border不会自动响应 focus，必须手动写input:focus { border: 2px solid blue; } - 用
outline: none移除焦点轮廓前，务必提供替代样式（如box-shadow），否则 WCAG 2.1 AA 不合规
什么时候该用 outline，而不是 border
不是“哪个更好看”，而是“谁更符合语义和规范约束”。
- 仅用于临时视觉反馈（如焦点指示、调试时高亮某元素）→ 选
outline - 需要控制四边不同样式（如只有下边框）、圆角（
border-radius）、或影响尺寸计算 → 必须用border - 想让轮廓线绕过文字折行区域（非矩形包裹）→
outline是唯一选择（border总是矩形） - 要兼容老 IE（≤8）？
outline基本不支持，只能退回到border+ JS 模拟 focus
真正容易出问题的，从来不是“outline 占不占空间”，而是你忘了检查父容器的 overflow、没处理好键盘焦点的可访问性替代方案、或者误以为 outline-offset 能像 margin 一样推开其他元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
