边框（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没有此属性
