outline不占盒模型空间而border占用，这是根本区别：border改变元素布局尺寸，outline仅视觉呈现且不影响周围元素。
outline 完全不占用盒模型空间，border 是盒模型的正式组成部分
这是最根本的区别：设置 border 会改变元素实际占据的布局空间（除非用 box-sizing: border-box 把它“挤进”宽高里）；而 outline 就像贴在元素外侧的一层透明胶带——看得见、不影响尺寸、不推挤邻居元素。
典型现象：
一个 div { width: 200px; height: 100px; } 加上 border: 10px solid red; 后，它在页面中实际占位变成 220×120px；
换成 outline: 10px solid red;，尺寸仍是 200×100px，outline 可能直接叠在旁边元素上，甚至被父容器的 overflow: hidden 裁掉（但它本身不会触发裁剪——因为 outline 不属于盒模型）。
为什么不能用 outline 替代 border 做装饰性边框
因为 outline 缺少关键设计能力，硬套会翻车：
-
outline不支持border-radius：给圆形头像加outline，结果是方框光晕，视觉割裂 -
outline无法单边控制：不能只让顶部有轮廓，outline-top是无效写法 -
outline不能响应鼠标事件：你 hover 到 outline 区域，:hover不会触发 -
outline会被transform或clip-path影响绘制位置，但行为不稳定，不推荐依赖
✅ 正确做法：装饰/结构边框一律用 border；需要圆角就配 border-radius；需要阴影感可叠加 box-shadow。
outline 的真实用途：聚焦提示与无扰动调试
浏览器默认给 input、button、a 等可交互元素加 focus outline，不是 bug，是无障碍刚需。移除它必须有替代方案：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
outline: none;—— 键盘用户瞬间“失焦”，找不到当前操作位置 - ✅ 推荐写法：
outline: 2px solid #007bff; outline-offset: 2px;，或用:focus-visible精准控制 - ✅ 调试时快速标记：
*:hover { outline: 2px dashed gold; }，不影响布局，所见即所得
注意：outline-offset 是 outline 独有的属性，负值能让轮廓向内“缩进”，但可能被内容遮挡；border 没有对应机制。
容易忽略的关键细节：overflow 和 z-index 行为差异
这两个属性暴露了 outline 和 border 在渲染层级上的本质不同：
-
border属于元素自身盒模型，会被父级的overflow: hidden裁剪 -
outline绘制在元素“外部”，不受父级 overflow 限制——它可能溢出到父容器之外，甚至盖住其他元素 -
outline没有 z-index，它始终在元素的 border 之上、但又低于所有显式设置了z-index的兄弟元素（渲染顺序固定）
所以当 outline 看不见时，先检查是否被其他元素遮挡，而不是怀疑 CSS 没生效。
真正理解 outline 和 border 的区别，不在于记住“outline 不占空间”，而在于意识到：一个是布局的砖块（border），一个是悬浮的指示灯（outline）。选错，轻则样式错位，重则可访问性违规。
