border是结构边框影响布局，outline是视觉标记不占空间；前者支持圆角并用于稳定UI，后者常用于聚焦提示与临时高亮，且始终为矩形。
border 和 outline 都可以用来为元素添加边框效果，但它们在渲染方式、布局影响和使用场景上有明显区别。理解这些差异有助于更合理地选择使用哪一个。
1. 是否占据文档流空间
border 是元素盒模型的一部分，属于 width 和 height 的外部（在 border-box 模式下计入总宽高），会影响布局。它的存在会占用实际空间。
outline 绘制在元素边缘之外，不占据文档流中的任何空间，不会影响其他元素的排布。
举例：- 给一个 div 加 10px solid border，页面布局会向外“撑开”。
- 换成 10px solid outline，div 周围的内容位置不变，边框可能覆盖相邻元素。
2. 形状与圆角支持
border 支持 border-radius，可以轻松实现圆角或圆形边框。
立即学习“前端免费学习笔记（深入）”；
outline 不支持圆角，始终是矩形，即使元素本身是圆形，outline 仍围绕原始矩形区域绘制。
常见问题：
- 头像用 border-radius: 50% 变成圆形，加 outline 后出现“方框光晕”，视觉上不协调。
- 此时应避免使用 outline，改用 border 或 box-shadow 实现圆形外框。
3. 位置与绘制层级
border 紧贴 padding 或 content 外侧，是元素结构的一部分。
outline 绘制在 border 外面，但不影响布局，更像是“浮动”的轮廓线。
- outline 出现在 border 之外，可能遮挡邻近元素。
- 默认情况下 outline 不会触发重排，只触发重绘。
4. 应用场景对比
使用 border 的典型场景：
- 需要稳定布局的边框样式，如卡片、按钮、输入框等。
- 需要圆角、边框颜色变化、边框动画等精细控制。
- 作为 UI 结构的一部分，比如分割线、装饰边框。
使用 outline 的典型场景：
- 可访问性需求：浏览器默认在聚焦（focus）时显示 outline，帮助键盘用户识别当前焦点元素。
- 临时高亮调试：开发时快速标记某个元素，不影响布局。
- 表单验证提示：JavaScript 动态添加红色 outline 表示输入错误，避免改变布局。
注意：出于可访问性考虑，不要随意移除 focus 上的 outline。若需美化，可用 outline-offset 调整距离，或用 box-shadow 替代。
基本上就这些。关键在于：border 是“结构边框”，影响布局；outline 是“视觉标记”，用于提示且不扰动页面。根据是否需要参与布局和是否要圆角来决定用哪个。
