边框（border）属于盒模型影响布局，可设圆角且支持单边控制；轮廓（outline）不占空间不影响布局，整体显示并可用 outline-offset 调整距离，多用于焦点提示。
边框（border）和轮廓（outline）都是 css 中用来修饰元素外观的视觉属性，但它们在渲染方式、布局影响和使用场景上有明显 区别。理解这些差异有助于更精准地控制页面样式。
1. 是否占据文档流空间
border 是元素盒模型的一部分，属于 标准盒模型中的边框层，会影响元素的实际占用空间。当设置 border 后，元素的宽度和高度会包含 border（除非使用 box-sizing 调整）。
outline 则 绘制在元素边缘之外，不占文档流空间
- • border 增加会使元素整体变大（可能影响布局） • outline 不会改变布局，即使加粗也不会挤开相邻元素
2. 形状与位置差异
border 紧贴元素边界，只能是矩形（或圆角矩形），且四边独立可设。
立即学习 “ 前端免费学习笔记（深入）”；
outline 通常围绕整个元素外围画出一条连续线条，不能单独设置某一边，常见为矩形，但能跟随 border-radius 轻微弯曲。
- • border 可以分别设置 top、right、bottom、left 样式 • outline 是整体出现，无法拆分单边控制
3. 常见应用场景
border 广泛用于日常样式设计，比如按钮边框、卡片分隔、输入框装饰等。
outline 更多用于 可访问性与交互反馈 ，典型用途是 浏览器 默认的：focus 高亮提示。
- • 表单元素获得焦点时用 outline 提醒用户（推荐保留以提升无障碍体验） • 自定义 focus 样式时常先 outline: none 再用 border 或 box-shadow 替代 • 调试布局时可用临时 outline 标记元素范围（不影响排版）
4. 样式控制能力对比
border 支持宽度、样式（solid/dashed/dotted 等）、颜色的完整控制，并可通过 border-radius 实现圆角。
outline 也支持 style、width、color，但 不支持虚线样式如 dashed 在某些旧 浏览器 有兼容问题，而且不能设置圆角。
- • outline-style 常用值：solid、dotted、none • outline-offset 可以控制轮廓与元素的距离，border 没有此属性
基本上就这些。合理利用两者特性，既能保持布局稳定，又能实现清晰的视觉反馈。
