border属于盒模型，影响布局尺寸，支持样式和圆角；2. outline不占空间，不影响布局，无圆角，常用于焦点提示；3. 布局用border，视觉标记用outline，避免滥用outline: none。
border 和 outline 都能为元素添加边框效果，但它们在盒模型中的表现和行为有本质区别。理解这些差异有助于更精准地控制页面布局和视觉反馈。
1. border 是盒模型的一部分
border 属于标准盒模型的组成部分，位于 padding 外侧、margin 内侧。它的尺寸会直接影响元素的总宽高。
当设置 box-sizing: border-box 时，border 的宽度会被包含在 width 和 height 中；否则（content-box），border 会额外增加元素的实际占用空间。
- border 占据布局空间，参与文档流
- 可设置边框样式（solid、dashed 等）、颜色、宽度，并可分别控制每条边
- 支持圆角（border-radius）
- 示例：border: 2px solid #000;
2. outline 不影响盒模型布局
outline 是绘制在元素 border 外部的线条，但它不占任何空间，不会改变元素的大小或位置，也不会影响周围元素的排布。
立即学习“前端免费学习笔记（深入）”；
它常用于表示焦点状态（如 input 获得焦点时的默认高亮），是一种辅助性视觉提示。
- outline 不参与盒模型计算，不影响 layout 和 paint
- 通常整体设置，不能单独指定某一条边
- 不支持圆角（即使设置 border-radius，outline 仍为矩形）
- 常用场景：可访问性中的焦点指示，调试时标记元素
- 示例：outline: 2px dotted blue;
3. 实际应用建议
在布局设计中，若需要边框作为结构的一部分（比如卡片、按钮边框），应使用 border。若只是临时高亮某个元素（如调试或聚焦提示），且不想影响布局，outline 更合适。
避免滥用 outline: none，这会降低键盘用户的操作体验。如需自定义焦点样式，可用 focus-visible 或替换为其他可视提示。
基本上就这些。关键在于：border 是“结构边框”，outline 是“视觉标记”。
