outline 是绘制层的“描边”，不参与盒模型布局计算，不影响 width、height、margin、padding；border 则是盒模型正式组成部分，其宽度计入元素总尺寸。
outline 是绘制层的“描边”，不是盒模型的一部分
浏览器渲染时，outline 被视为“装饰性轮廓”，它不参与布局计算。也就是说，元素的 width、height、margin、padding 都完全无视 outline 的存在。它就像在渲染完成后的画布上额外盖了一层线——位置由元素的 border box 决定，但不影响其他元素排布。
而 border 是盒模型（W3C 标准盒模型）的正式组成部分：它紧贴 padding 外侧、在 margin 内侧，其宽度直接计入元素总尺寸（除非启用了 box-sizing: border-box）。所以添加 border 后，若未调整 width，很可能导致内容被压缩或触发换行。
outline 不支持单边设置，也无法用 border-radius 圆角
这是设计定位决定的：outline 本质是围绕整个元素的统一轮廓，没有 outline-top 这类属性，也不响应 border-radius。你写 outline-radius: 4px 是无效的，浏览器会忽略。
常见误操作包括：
立即学习“前端免费学习笔记（深入）”；
- 试图用
outline实现左/下边框效果 → 改用border-left或伪元素 - 给
outline加border-radius想让它变圆 → 无效，必须用border+border-radius - 依赖
outline推动相邻元素位移 → 它不会触发重排（reflow），只可能触发重绘（repaint）
focus 状态下 outline 的默认行为容易引发布局抖动
很多浏览器（如 Chrome）对可聚焦元素（button、input）默认加 outline: -webkit-focus-ring-color auto 1px。这个 auto 值会根据元素当前 border box 自动计算偏移（通常是 2px），但它不占空间，所以 focus 进来时，视觉上像“弹出一层”，但周围元素纹丝不动 —— 表面看是好事，实则掩盖了两个问题：
- 无障碍用户依赖这个 outline 区分焦点，删掉又不补替代方案 = 违反 WCAG
- 如果手动设了
outline: 2px solid blue却忘了outline-offset，可能和 border 重叠甚至被裁剪（尤其在overflow: hidden容器里） -
outline-offset是唯一能控制 outline 距离的属性，负值会让 outline 向内收缩，甚至覆盖文字
什么时候该用 outline，什么时候必须用 border
选 outline 的典型场景：
- 仅需视觉反馈且不希望影响布局（如键盘 focus 高亮）
- 需要“浮在上面”的描边效果（比如调试时临时标出某个元素）
- 做伪聚焦态（
:focus-visible配合outline更安全）
必须用 border 的情况：
- 要精确控制某一边（
border-bottom: 1px solid #ccc） - 需要圆角、虚线、渐变边框（
border-image） - 边框要参与尺寸计算（例如卡片固定宽高，边框是设计的一部分）
- 服务端渲染或 SSR 页面中，避免 JS 注入后因 outline 触发意外重绘
一个常被忽略的细节：outline 在打印媒体（@media print）中默认不显示，而 border 会照常输出 —— 如果你的管理后台需要打印带边框的表格，别只靠 outline。
