border占用布局空间而outline不占用，这是根本区别；前者影响盒模型尺寸需配合box-sizing控制，后者仅用于焦点提示等交互反馈且不触发重排，但不支持圆角、单边设置且Safari存在渲染偏差。
border 会占用布局空间，outline 不会
这是最根本的区别。当你给一个 div 加 border: 2px solid red，它的 width 和 height 会自动增加 4px（左右各 2px）；而 outline: 2px solid blue 完全不参与盒模型计算，不影响周围元素位置或自身尺寸。
这意味着：
- 需要精确控制容器尺寸（比如网格项、Flex 子项、表单控件固定宽高）时，用
border更可控，但必须把box-sizing: border-box设好，否则容易溢出 - 做临时高亮（如焦点态
:focus）、调试视觉边界、或叠加在已有边框上再加一层提示时，outline是更安全的选择——它不会导致重排（reflow） - 某些 UI 组件库（如 Ant Design）默认移除原生
outline，再用border模拟焦点环，就是因为原生outline样式难定制、且在部分浏览器中无法设置圆角
outline 不支持圆角和单边设置
outline 只能统一设置四边，且 outline-radius 不存在。你写 outline: 2px solid #007bff; outline-offset: 2px; 没问题，但加 border-radius: 4px 对它完全无效。
所以：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 要实现带圆角的焦点框（比如按钮获得焦点时出现圆角高亮），只能用
border或伪元素 +box-shadow -
outline-offset是唯一可调距离的属性，但它作用于整个 outline，不能像border-top那样单独控制某一边 - 若需“仅上边有强调线”，必须用
border-top，outline无法满足
:focus 时 outline 常被误删，导致可访问性问题
很多团队写 *:focus { outline: none; } 图省事，结果键盘用户无法感知当前聚焦位置。这不是“美观问题”，是 WCAG 2.1 AA 级别强制要求。
正确做法是：
- 保留
outline，但用outline-offset微调位置，避免与内容重叠 - 用
outline-color和outline-style改成更协调的样式，比如outline: 2px solid #007bff; outline-offset: 2px; - 真要彻底替换，必须提供同等可识别的替代方案：例如用
border+box-shadow模拟，并确保焦点状态在所有视口尺寸下都清晰可见
性能敏感场景优先考虑 outline
当频繁切换焦点（如键盘导航大量表单项）、或动画中动态增删边框时，border 触发 layout（重排），而 outline 只触发 paint（重绘），开销更低。
不过要注意：
-
outline在 Safari 中对transform元素有时渲染异常（偏移错位），需加outline-offset: 0或降级为box-shadow - 某些旧版 Android WebView 对
outline支持不一致，关键路径建议用border或双保险方案 - 如果用了
outline做焦点提示，务必配合:focus-visible，避免鼠标点击时也出现 outline（现代写法：&:focus-visible { outline: 2px solid #007bff; }）
focus-visible + box-shadow）专管交互反馈。最容易被忽略的是可访问性约束和 Safari 的 outline 渲染偏差——这两点一旦线上暴露，修复成本远高于初期多写几行 CSS。 
