outline不占据空间，因此不会触发重排、不影响布局，是其实用核心；用于焦点高亮时避免元素跳动，调试标记更安全，仅触发重绘，但不支持圆角和单边控制。
outline 不占据空间，意味着它不会触发重排（reflow），也不会影响周围元素布局——这是它最核心的实用价值。
聚焦样式不挤占页面结构
当用 outline 实现键盘焦点高亮（比如 :focus）时，如果换成 border，加粗或变色可能让元素尺寸突变，导致相邻元素跳动。而 outline 是画在盒模型“之外”的，不影响 layout。
- 浏览器默认的
outline: -webkit-focus-ring-color auto 1px就是为此设计 - 自定义时建议保留
outline-offset控制距离，避免遮挡内容 - 切忌用
outline: none全局移除——可访问性会受损
调试时临时标记元素不干扰渲染
开发中快速定位某个 div 或 button，用 outline: 2px solid red 比 border 更安全：它不会改变元素 width/height，也不影响 flex/grid 的尺寸计算。
- 尤其在响应式布局或 CSS Grid 中，
border可能让列宽超限、换行异常 -
outline不参与 box-sizing 计算，无需调整padding或margin补偿 - 注意：
outline不支持圆角（border-radius对它无效）
与 border 的行为差异直接影响性能
outline 修改只触发重绘（repaint），而 border 改变通常触发重排（reflow）——后者开销大得多，尤其在动画或高频交互场景下。
立即学习“前端免费学习笔记（深入）”；
- 例如在滚动中动态添加 focus outline，不会引起 layout thrashing
- 但
outline无法设置单边（只能全方向统一），也不能做虚线+实线混合等精细控制 - 需要精确控制某一边时，必须用
border+box-sizing: border-box手动补偿
真正容易被忽略的是：outline 的绘制顺序在所有其他盒模型属性之上，且不响应 pointer-events —— 它纯粹是视觉层的“贴纸”，既不阻挡点击，也不参与事件捕获。用错地方（比如想靠它做可点击边框）就会卡住逻辑。
