border是盒模型的一部分，影响布局和尺寸，支持独立边设置及圆角；outline不占空间、不影响布局，整体显示且不支持圆角，常用于焦点提示，提升可访问性。
border 与 outline 都是CSS中用于给元素添加边框效果的属性，但它们在表现和行为上有明显区别。理解这些差异有助于更合理地使用它们实现不同的视觉效果。
1. 位置与布局影响
border 是元素盒模型的一部分，占据实际空间，会影响布局。- 设置 border 后，元素的宽度和高度会包含 border（除非使用 box-sizing: border-box）
- border 会推挤相邻元素，可能引起页面重排
- outline 不属于盒模型，不会影响元素尺寸或周围布局
- 即使添加 outline，元素原本的位置和大小保持不变
2. 样式与形状支持
border 支持分别设置四条边的样式、颜色和宽度。- 可以单独控制 top、right、bottom、left 边框
- 常用于创建边框框、分隔线、按钮边框等
- 支持圆角（border-radius）
- outline 是围绕元素边缘的完整轮廓，无法只显示某一条边
- 不支持圆角，总是矩形（即使元素有 border-radius）
- 常见样式有实线、虚线、点线等
3. 常见应用场景
border 适用于需要结构化边框的设计场景。- 卡片、输入框、按钮的默认边框
- 通过 border 实现三角形、分割线等图形
- 配合 padding 和 margin 进行精确布局控制
- 浏览器默认在元素获得焦点时显示 outline（如 input、button）
- 提升键盘导航用户的体验，帮助识别当前聚焦元素
- 开发中常自定义 focus 状态的 outline 来替代默认样式
基本上就这些。合理使用 border 和 outline，既能保证视觉设计，又能兼顾用户体验与可访问性。注意不要随意移除 outline，尤其是 focus 状态下的，否则会影响无障碍访问。
