outline不占空间且不影响布局，border会撑开尺寸；outline无圆角和单边控制，仅适用于聚焦提示与调试；border配合box-sizing: border-box才是可控装饰方案。
outline 不占空间，border 会撑开布局
这是最根本的差异：加 border 后，元素实际尺寸变大；加 outline 只是“画一层光晕”，不影响 width、height，也不推挤邻居元素。
- 一个
div { width: 200px; height: 100px; }加上border: 4px solid #333，它在文档流中就占208px × 108px - 换成
outline: 4px solid #333，尺寸仍是200px × 100px，轮廓可能直接叠在旁边文字上，甚至被父容器的overflow: hidden裁掉（但它本身不会触发裁剪） - 想让边框不撑开布局？别用
outline替代，改用box-sizing: border-box+border，这才是可控方案
outline 不支持圆角和单边控制
outline 是矩形的、整体生效的——它永远围绕元素原始盒模型绘制，哪怕你写了 border-radius: 50%，它也还是方的；也没有 outline-top 这种东西。
- 给头像加
border-radius: 50%再加outline→ “圆脸+方光晕”，视觉割裂 - 需要顶部实线、右侧虚线、底部双线？
border-top/border-right可以轻松实现；outline完全做不到 - 真正要圆角外框，优先用
border（配box-sizing: border-box）或box-shadow（更灵活，还支持模糊和透明度）
outline 的唯一正当用途：聚焦提示与调试标记
浏览器默认给 input、button、a 等可交互元素加 outline，不是 bug，是无障碍（a11y）刚需。移除它必须提供替代方案。
- ❌ 错误写法：
outline: none;—— 键盘用户瞬间“失焦”，找不到当前操作位置 - ✅ 推荐写法：
outline: 2px solid #007bff; outline-offset: 2px;，或更现代的:focus-visible条件触发 - ✅ 调试时快速高亮：
*:hover { outline: 2px dashed gold; }，所见即所得，不干扰布局 - 注意：
outline-color: invert在现代浏览器中基本失效，别依赖它自动适配深色/浅色背景
border 和 outline 的层级与溢出行为不同
它们在渲染层面上的“位置”和“脾气”完全不同：一个属于盒模型，一个游离于外。
立即学习“前端免费学习笔记（深入）”；
-
border属于元素自身，会被父级的overflow: hidden裁剪 -
outline绘制在元素外部，不受父级overflow限制——它可能溢出到父容器之外，甚至盖住其他兄弟元素 -
outline没有z-index，渲染顺序固定：总在border之上、但低于所有显式设置了z-index的兄弟元素 - 滥用
outline做装饰性边框，容易引发视觉重叠、焦点不可见、响应区域错位等隐蔽问题
真正难的不是记住区别，而是每次写样式前下意识问一句：我是在定义结构（用 border），还是在做临时提示（用 outline）？混淆这两者，轻则视觉割裂，重则破坏可访问性。
