outline 不占用空间，是绘制在边框外侧、不参与文档流的装饰线；它不影响 width/height 计算、不触发重排、不可设圆角或分边，但可能遮挡内容，需慎用 outline: none 以免损害可访问性。
不会占用空间。 outline 是绘制在元素边框（border）外侧的装饰线，它完全不参与文档流，也不影响布局计算 —— 这是它和 border 最本质的区别。
为什么 outline 不影响 width/height 计算？
浏览器在盒模型布局阶段只考虑 content、padding、border 和 margin；outline 被视为“绘制层”上的附加效果，类似阴影或高亮，渲染时直接叠在已布局完成的元素上。
这意味着：
-
box-sizing: border-box对outline完全无效 - 设置
outline-width: 10px不会让元素变宽，也不会触发父容器重排 - 相邻元素不会因为你的
outline出现而被“挤开”
outline 和 border 的关键差异场景
当你需要视觉强调但又不想破坏现有布局时，outline 才是合理选择。比如：
- 键盘聚焦状态（
:focus）：用outline避免按钮因border增厚导致跳动 - 调试时临时高亮某个元素：加
outline: 2px solid red不会扰动页面其他部分 - 实现“双线边框”效果：
border: 1px solid #ccc+outline: 1px solid #999，且不改变尺寸
注意：outline 不能设圆角（outline-radius 不存在），也不能像 border 那样分边设置（outline-top 等无效），只能整体控制。
outline 可能意外遮挡内容的坑
虽然不占空间，但它会真实渲染在 z 轴顶层，可能盖住邻近元素的内容：
- 如果父容器设置了
overflow: hidden，超出部分的outline会被裁剪 —— 这常被误认为“没生效” - 浮动元素或绝对定位元素旁边有
outline，容易视觉重叠，但 DOM 尺寸完全不变 -
outline-offset可以拉开距离，比如outline-offset: 4px让 outline 离边框更远，避免遮挡
真正容易被忽略的是：当使用 outline 做可访问性焦点指示时，别盲目 outline: none —— 这会破坏键盘用户导航，应改用 outline-color 或配合 outline-offset 优化视觉而不牺牲可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
