在 CSS 中，outline 和 border 都是用于为元素绘制“边框”的，但它们在作用、布局影响、语法、使用场景等方面有明显区别：
| 特性 | border | outline |
|---|---|---|
| 是否占据空间 | ✅ 占据布局空间（影响元素尺寸） | ❌ 不占据空间（不影响布局） |
| 是否影响元素大小 | ✅ 会改变元素宽高 | ❌ 不改变元素宽高 |
| 是否可以分别设置四边 | ✅ 可以（border-top 等） | ❌ 不可以（outline 是统一的） |
| 是否可以设置圆角 | ✅ border-radius 支持 | ❌ 不支持圆角 |
| 是否跟随盒模型 | ✅ 是盒模型的一部分 | ❌ 不是盒模型的一部分 |
是否会被 overflow 裁剪 | ✅ 会被裁剪 | ❌ 不会被裁剪（总是绘制在元素外部） |
| 是否响应鼠标事件 | ✅ 是元素的一部分，响应事件 | ❌ 不响应鼠标事件 |
| 典型用途 | 装饰、布局、分隔 | 焦点高亮（如 a:focus）、调试 |
✅ 举个例子：
button {
border: 2px solid blue;
outline: 3px solid red;
}
border是蓝色实线，会撑大按钮尺寸；outline是红色实线，不会撑大按钮，绘制在border外围。
✅ 总结一句话：
border是“布局的一部分”，outline是“视觉的点缀”，不干扰布局。
🔍 小提示：
- 做焦点样式时优先用
outline，避免布局跳动； - 做装饰性边框用
border，可以控制每一边、加圆角。
