outline不占布局空间且游离于盒模型外，border则属于盒模型并影响尺寸与布局；outline仅支持整体设置、无单边控制、不支持圆角和动画，而border可精细控制各边、支持border-radius及平滑过渡。
outline 不占据布局空间，border 会撑开盒模型
这是最根本的区别。border 是盒模型标准组成部分，计算在 width 和 height 内（除非用 box-sizing: border-box），而 outline 完全游离于盒模型之外，绘制在元素“外面”，不影响任何布局流。
常见错误现象：给一个 width: 200px 的按钮加了 outline: 2px solid red，发现它没变宽、也没挤开旁边元素——这不是 bug，是设计如此；但若误以为 outline 能替代 border 做视觉边框，就可能在响应式场景下漏掉尺寸预留。
-
border参与getBoundingClientRect()返回的尺寸计算；outline不参与 - 设置
outline-offset可以控制outline距离边框的距离（支持负值），但这个偏移也不影响布局 - flex 或 grid 容器中，
outline不会触发重新排列子项，border改变则可能触发重排
outline 无法单独设置某一边，border 可以精细控制每条边
outline 是个“整体属性”：没有 outline-top、outline-left 这类写法，只能统一设四边样式、宽度、颜色；border 则支持完全独立控制，比如只加底边、或让右边比左边粗一倍。
使用场景：做 focus 状态高亮时，outline 天然适合全包围；但做卡片分隔线、表单下划线、或模拟 iOS 导航栏阴影效果，就必须用 border-bottom 或 border-right。
- 想实现“仅左侧有蓝边”的 UI，只能用
border-left: 2px solid #007bff，outline无解 -
outline-style只支持solid、dashed、dotted、none等有限值，不支持double或自定义虚线间隔 - 某些旧版 Safari 对
outline渲染有轻微锯齿，而border更稳定
outline 默认跟随 focus 状态自动出现，border 需手动控制显隐
浏览器对可聚焦元素（如 button、a、input）默认添加 outline 样式，用于键盘导航可访问性；border 则完全静默，必须显式声明才可见。
容易踩的坑：直接删掉 outline: none 来“去焦点框”，结果导致 WCAG 可访问性失败；或者用 border 模拟 focus 效果，却忘了处理 :focus-visible 的降级逻辑。
- 正确做法是保留 outline，仅用
outline-offset微调位置，或用outline-color匹配主题色 - 若必须隐藏原生 outline，请搭配
:focus-visible使用，避免影响鼠标用户视觉反馈 -
border在:hover下变化更自然，但注意不要让 border 宽度变化引发 layout shift（建议提前设好透明占位）
outline 不支持圆角，border 支持 border-radius
outline 永远是直角矩形轮廓，哪怕元素本身是 border-radius: 50%，它的 outline 依然是正圆外接矩形；border 则严格跟随 border-radius 弧度渲染。
这在做头像、图标按钮、带圆角卡片时特别明显：如果用 outline 做选中态，会出现“圆图 + 方框”的割裂感；而 border 能保持视觉一致性。
- 想让 focus 状态也圆润？只能用
border+:focus，并确保初始border为透明或同色 -
outline的outline-offset为负值时，可能被裁剪（尤其在 overflow: hidden 容器内），border不会出现此问题 - 动画
outline几乎不可行（不支持 transition），但border-color或border-width可平滑过渡
实际项目里最容易被忽略的是：把 outline 当作视觉装饰来用，却没意识到它绕开了所有布局约束和圆角逻辑。真要兼顾可访问性与视觉一致性，往往得用 border 搭配 :focus-visible 和透明占位技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
