border是盒模型组成部分，影响布局尺寸；outline游离于盒模型外，不占布局空间，仅用于可访问性焦点提示或调试标记。
outline 不占据布局空间，border 会撑开盒模型
这是最核心的区别：border 是盒模型（CSS Box Model）的正式组成部分，计算在 width 和 height 内（标准盒模型下），而 outline 完全游离于盒模型之外，绘制在元素边框外侧，不影响任何布局尺寸或位置。
设置 border 后元素实际尺寸会变大
当你给一个 width: 200px 的块级元素加 border: 3px solid red，它的总占用宽度就变成 200px + 2 × 3px = 206px（左右 border 各 3px）。这会导致父容器溢出、相邻元素位移等常见布局问题。
避免意外撑开的常用做法：
- 用
box-sizing: border-box—— 此时border被包含在设定的width内，不额外扩张 - 改用
outline做临时高亮（比如 focus 状态），因为它完全不参与尺寸计算 - 若需视觉边框但又不想影响布局，可考虑
box-shadow: 0 0 0 3px red（注意模糊半径为 0 时近似边框效果）
outline 的绘制位置和限制
outline 默认绘制在元素 border 外侧，但具体偏移量不可控（浏览器决定，通常约 1–3px），且不支持圆角、不支持分边设置（outline-top 不存在）、不能设置不同粗细的单边 outline。
典型误用场景：
- 想用
outline: 2px solid blue替代border实现“点击后加边框”，结果发现 focus 时 outline 出现在奇怪位置，或与 border 重叠难看 → 应先outline: none，再用border或box-shadow手动控制 - 希望 outline 绕过圆角 → 不行，
outline永远是矩形，哪怕元素有border-radius - 用 outline 做响应式边框 → 不推荐，因偏移量无标准定义，不同浏览器/缩放下表现不一致
什么时候必须用 outline？
只有两个不可替代的场景：
- 保持键盘导航可访问性：浏览器默认给
:focus元素加 outline，移除它（如outline: none）必须用其他方式（如border或box-shadow）提供同等视觉反馈，否则违反 WCAG - 需要叠加在已有 border 上的临时标记（例如调试时用 JS 动态加
outline: 3px dashed green），且绝对不能扰动布局流
其它所有“想要边框效果”的需求，优先选 border 或 box-shadow；把 outline 当作纯装饰性边框，等于主动放弃控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
