outline 不影响布局而 border 会撑开尺寸——因 outline 不参与盒模型计算，不改变 width/height 及 margin/padding 范围；border 则增加实际占位；outline 无单边控制、不支持 border-radius、渲染层级固定且总在 border 之上。
outline 不影响布局，border 会撑开尺寸——这是你写错边框时“元素突然跳位”或“卡片挤出容器”的根本原因。
outline 为什么不会推挤其他元素
outline 是画在元素 border 外侧的一层纯视觉装饰，不参与盒模型计算。它不增加 width 和 height，也不改变 margin 或 padding 的作用范围。
- 给一个
width: 200px; height: 100px;的 div 加border: 4px solid #000→ 实际占位变成208px × 108px - 加
outline: 4px solid #f00→ 尺寸仍是200px × 100px，红色线可能直接叠在旁边文字上 - 父容器设了
overflow: hidden？border会被裁掉，outline可能溢出到外面甚至盖住兄弟元素
border-radius 对 outline 完全无效
哪怕你给按钮写了 border-radius: 8px，再加 outline: 2px solid blue，轮廓依然是生硬的直角矩形——它只认元素原始盒模型的边界，不跟随圆角。
- 常见错误现象：
border-radius: 50%的头像 +outline→ “圆脸+方光晕”，视觉割裂 - 想让外框也圆？别用
outline，改用border（配合box-sizing: border-box）或box-shadow: 0 0 0 2px currentColor -
outline没有outline-top这种单边控制，四边永远统一生效
:focus 时 outline 突然“跳一下”怎么修
这不是 bug，是 outline 和 border 同时存在导致的视觉错位：聚焦时 outline 出现，但 border 已经占了空间，两者叠加造成位置偏移。
- 检查是否在
:focus里写了outline: 2px solid #007bff，同时元素本身又有border: 1px solid #ccc - 修复方案：要么统一用
border（记得box-sizing: border-box），要么把默认border去掉，仅靠outline+outline-offset: 2px模拟外扩效果 - 千万别写
outline: none就完事——键盘用户立刻失去焦点位置，违反可访问性要求
什么时候该用 outline，什么时候必须用 border
真正难的不是语法，而是每次动笔前问自己一句：我是在定义结构，还是在做临时提示？
- 需要稳定尺寸、圆角、分边样式、响应点击区域？→ 用
border - 只是想高亮当前焦点、调试时快速框出元素、又不想扰动布局？→ 用
outline - 想模拟“双层边框”？
border+box-shadow更可控；outline+border容易引发重叠和错位 -
outline-offset可以微调距离，但负值行为未定义（部分浏览器直接忽略），别依赖它做精确定位
最容易被忽略的是：outline 的渲染顺序固定——总在 border 之上、但低于所有显式设置了 z-index 的兄弟元素。拿它做装饰边框，视觉层级容易失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
