最直接用 border 给任意 HTML 元素加方框，但需注意 box-sizing 默认为 content-box 会导致布局变化；border 简写需三值齐全，单边或圆角可用对应属性；outline 不占布局空间且不可控，勿替代 border；内联元素加 border 易塌陷，建议用 inline-block 或 vertical-align 修复；透明边框用 transparent 可避免重排，但 IE8 不支持。
用 border 给任意 HTML 元素加方框最直接
几乎所有块级和行内元素（比如 <div>、<p>、<span>）都能用 border 加方框，不需要额外标签或 JS。关键不是“能不能加”，而是“加完会不会影响布局”。
常见错误现象：border 加上后元素突然换行、宽度变宽、文字被挤出——这是因为默认的 box-sizing 是 content-box，边框会额外增加尺寸。
-
border: 1px solid #000是最简写法，三个值缺一不可（宽度、样式、颜色） - 只想要某一边有线？用
border-top、border-left等单独属性更可控 - 圆角方框？顺手加
border-radius: 4px，别忘了它不改变边框本质，只是切角 - 想让边框不撑大容器？在同一样式里加上
box-sizing: border-box
outline 和 border 别混用，它们定位逻辑完全不同
outline 常被误当作“另一种边框”，但它不占布局空间、永远居中绘制、无法设单边、也不能圆角。它只该用于焦点状态（比如键盘 tab 切换时的高亮），不该用来做 UI 边框。
使用场景错位典型表现：用 outline 替代 border 后，元素 hover 时位置轻微抖动；或者加了 outline-offset 想“拉开距离”，结果发现移动端点击反馈异常。
立即学习“前端免费学习笔记（深入）”；
-
outline不触发重排（不影响其他元素位置），border会 -
outline无法设置border-top-color这类细分属性 - 需要“外发光”效果？
box-shadow: 0 0 0 2px #000比outline更可靠
内联元素（如 <span>）加 border 要小心高度塌陷
默认情况下 <span> 这类内联元素的 border 会紧贴文字 baseline，上下留白极小，看起来像“没包住”。这不是 bug，是 CSS 行盒（line box）的渲染规则。
性能影响不大，但视觉上容易误判是否生效。尤其在字体大小变化频繁的项目里，同一段 CSS 在不同字号下表现不一致。
- 快速修复：加
vertical-align: middle或top调整对齐基线 - 更稳妥做法：改用
display: inline-block，这样border就能完整包裹内容区域 - 避免用
height强行撑开——可能破坏行高一致性，尤其多行文本时
边框颜色透明但要保留占位？别用 transparent 直接替代
写 border: 1px solid transparent 看似“隐形”，其实它仍参与盒模型计算，会留出 1px 空间。这在响应式切换边框显隐时很关键——比如 hover 出现边框，如果初始是 none，就会触发重排；而用 transparent 就不会跳动。
但要注意兼容性陷阱：IE8 及更早版本不支持 transparent 作为 border-color，如果还要兼容，得用 rgba(0,0,0,0) 或干脆放弃。
- 需要过渡动画？
border-color支持 CSS transition，border-style和border-width不支持 - 想让“无边框→有边框”平滑出现？初始设
border: 1px solid transparent，hover 改成border-color: #000 - 千万别写
border: 0来“清空”，它等价于border: 0 none currentColor，反而可能意外触发边框重绘
