outline 不影响布局而 border 会撑开元素尺寸，这是最根本区别；outline 是外部装饰线、不占空间、不可圆角、默认用于焦点提示，border 属于盒模型、可单独设置边、支持圆角和 border-image。
outline 不影响布局，border 会撑开元素尺寸
这是最根本的区别。border 是盒模型的一部分，它会增加元素的 width 和 height（除非用了 box-sizing: border-box）；而 outline 是画在元素“外面”的装饰线，不占空间、不触发重排。
常见错误现象：给一个 width: 200px 的按钮加了 border: 2px solid red，结果发现它比旁边没边框的按钮宽了 4px——这就是 border 撑开尺寸导致的。换成 outline: 2px solid red 就不会。
-
outline始终居中绘制在元素边缘外侧，无法设置“只加某一边” -
border可以单独控制border-top、border-radius等，outline没有这些能力 - 用
outline-offset能把outline推离元素边缘，border没有对应属性
outline 默认跟随 focus 状态，常被用于可访问性
浏览器默认会给获得键盘焦点的元素（比如按 Tab 进入的 button 或 input）加上 outline，这是关键的可访问性提示。很多人一上来就写 * { outline: none }，结果直接让键盘用户“失明”。
正确做法不是删掉 outline，而是优化它：
- 用
:focus-visible替代:focus控制 outline 显示时机（仅当用户用键盘聚焦时才显示） - 确保自定义
outline有足够对比度（至少 3:1，推荐 4.5:1） - 避免用
outline: 0或outline: none全局移除
示例：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
outline 不能圆角，border 可以用 border-radius
outline 永远是直角矩形，哪怕元素本身有 border-radius: 8px，它的 outline 还是硬边框。这是规范强制行为，没法绕过。
如果你需要带圆角的外边框效果，必须用 border，或者用 box-shadow 模拟（但要注意阴影不响应 pointer-events）。
-
outline的border-radius属性无效，设了也没用 -
outline不支持border-image、border-style的部分值（如dotted在某些旧浏览器渲染异常） - 想实现“聚焦时外扩+圆角”，优先考虑
box-shadow+border组合
outline 在打印样式和某些缩放场景下可能消失
部分浏览器（尤其是 Chrome 旧版本）在打印预览或系统级缩放（如 Windows 125% DPI）下会忽略 outline，而 border 基本稳定可见。
如果样式需要在打印或高DPI设备上可靠呈现，别依赖 outline 作为唯一视觉反馈。
- 打印媒体查询里显式声明
@media print { * { outline: none } }是安全的，但反过来不行 - 测试时务必在实际 DPI 缩放下检查（不只是浏览器 zoom）
- 移动端 Safari 对
outline支持较弱，尤其配合transform时容易错位
真正难的不是记住区别，而是判断什么时候该忍着不用 border 去换 outline——比如你改了一个组件的 padding，结果所有相邻布局都偏了，回头一看是有人偷偷给它加了 border 却没调 box-sizing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
