outline不影响布局流，因其是纯视觉层、不参与盒模型计算，不改变width/height/margin/padding，也不触发重排；它专为焦点反馈设计，具outline-offset等特性，但不支持单边设置、圆角或裁剪。
outline为什么不影响布局流
outline 是绘制在元素边框之外的装饰线，浏览器渲染时把它当作「纯视觉层」处理，不参与盒模型计算。它不会改变 width、height、margin 或 padding，也不触发重排（reflow），只影响重绘（repaint）。
这和 border 有本质区别：border 是盒模型的一部分，会撑开容器、影响相邻元素位置；而 outline 就像“贴在元素表面的一层胶片”，哪怕设成 outline: 3px solid red，父容器高度也不会变，兄弟元素也不会被挤开。
outline与focus可见性设计强相关
它的原始定位就是为可访问性服务：当用户用键盘 Tab 切换焦点时，浏览器默认给聚焦元素加 outline，确保视觉反馈清晰。如果它占空间，频繁出现/消失就会导致页面跳动，破坏体验。
- 所有现代浏览器对
:focus元素自动添加outline（通常为虚线） - 禁用它常用
outline: none，但必须用box-shadow或border替代，否则违反 WCAG 可访问性要求 -
outline-offset控制它离边框的距离，正值向外偏移，负值可能遮盖内容（但不改变布局）
outline的三个关键限制
它不像 border 那样灵活，这些限制直接源于“不占空间”的设计前提：
- 不能设置单边
outline-top等属性 —— 只有统一的outline、outline-style、outline-width、outline-color和outline-offset - 不支持圆角：
border-radius对outline完全无效，它永远是直角矩形（即使元素本身是圆角） - 无法用
clip-path或mask裁剪 —— 它在绘制层级上高于普通元素，且不受 CSS 剪裁上下文约束
什么时候该用outline，什么时候该用border或box-shadow
判断依据很简单：是否需要它参与布局、是否需要精细控制形状或交互响应。
- 要键盘焦点提示、且不希望页面抖动 → 用
outline（配合outline-offset微调位置） - 要模拟边框效果但又不想影响现有布局 → 优先考虑
box-shadow: 0 0 0 2px currentColor，它不占空间、支持圆角、可动画 - 需要单边高亮、内边框、或与其他元素对齐 → 必须用
border，哪怕要手动调整box-sizing或margin
真正容易被忽略的是：当用 outline 实现“选中态”时，如果元素本身有 border-radius，outline 依然会画出尖锐外框 —— 这不是 bug，是规范行为。想保持视觉一致，就得放弃 outline，改用 box-shadow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
