outline不占据布局空间且不触发重排，仅用于绘制层高亮；border则参与盒模型计算并撑开尺寸，支持圆角、分边设置及渐变等精细控制。
outline 不占据布局空间，border 会撑开元素尺寸
这是最根本的区别。当你给一个 <div> 加 <code>border: 2px solid red，它的 width 和 height 会自动包含这 2px；但加 outline: 2px solid blue，它完全不参与盒计算，不影响父容器流式布局、不触发重排（re-flow），只在绘制层（paint）上“叠”上去。
常见错误现象：outline 看起来“偏了”或“被裁剪”，往往是因为父容器设置了 overflow: hidden——outline 不受 border-box 控制，也不受 overflow 影响，但它真会被裁掉，因为它是绘制在元素边界外的，而 overflow: hidden 会裁剪所有超出 padding box 的内容（包括 outline）。
- 使用场景：focus 状态高亮、调试时临时标记元素（不影响布局）
- 性能影响：outline 触发的是重绘（repaint），不是重排，比 border 更轻量
- 兼容性：所有现代浏览器都支持，IE8+ 也支持基本 outline 属性
outline 没有圆角、不能分边设置、不支持渐变
outline 是个“粗放型”属性：它只有 outline-width、outline-style、outline-color，没有 outline-top-left-radius，也不能写成 outline-top: 1px solid #000——它天生就是四边统一的。
对比 border：border-radius 可控，border-top / border-left 可单独设，border-image 支持贴图和渐变。outline 完全不提供这些能力。
- 参数差异：
outline-style只支持solid、dashed、dotted、double、none；没有groove或inset - 容易踩的坑：试图用
outline实现内凹阴影或单边强调，结果发现做不到，只能切回border或用box-shadow
outline-offset 可以控制离边距离，border 没有等效机制
outline-offset 是 outline 独有的属性，用来设定 outline 边框线到元素边缘的距离（正值向外偏移，负值向内“挤入”）。例如 outline: 2px solid #333; outline-offset: 4px，会让那圈线离元素边缘空出 4px。
border 没有类似 offset，想模拟就得靠 margin 或 transform，但都会干扰布局或触发重排。
- 注意：负的
outline-offset（如-2px）可能导致 outline 被元素自身内容遮挡，尤其在文字密集区域 - 可访问性影响：部分屏幕阅读器 + 浏览器组合对负 offset 的 focus outline 渲染不可靠，生产环境慎用负值
focus 时 outline 默认行为可能被禁用，但别盲目设为 none
很多 CSS 重置库（如 normalize.css）或开发者会写 *:focus { outline: none }，这直接让键盘用户失去焦点指示，违反 WCAG 2.1。浏览器默认的 focus outline 是有明确可访问性意义的。
真正该做的是：用 outline 做定制化 focus 样式，而不是删掉它。
- 推荐做法：保留
outline: 2px solid #007aff，配合outline-offset: 2px避免贴边压抑感 - 更优解：用
outline: none+box-shadow: 0 0 0 2px #007aff，既能控制样式，又不破坏可访问性语义（只要 shadow 足够明显） - 容易忽略的点：伪类顺序很重要——
:focus-visible应优先于:focus，避免鼠标点击时也触发 outline
