outline不占布局空间且不参与盒模型计算，而border会撑开盒子影响表格结构；outline在border-collapse:collapse下失效，需用box-shadow替代；outline支持焦点语义但不响应border-radius，圆角效果必须用border实现。
outline不占布局空间，border会撑开盒子
给 <td> 加 <code>outline 看起来像加了边框，但实际它完全游离在盒模型之外：不触发重排、不增加 width/height、不影响相邻单元格间距。而 border 是盒模型的一部分，一旦设为 2px solid red，<td> 的实际宽度就多了 4px（左右各 2px），可能让整列变宽或换行。
<p>常见错误是用 <code>outline 替代 border 来“快速调试”，结果发现表格列宽错乱、文字挤到边线——不是样式写错了，是 outline 没参与布局计算。
- 需要精确控制列宽时，绝不能用
outline模拟边框 -
outline-offset可微调 outline 距离，但 offset 值为负时可能被父容器overflow: hidden剪掉 - 想让 hover 效果不扰动布局，
outline是合理选择；想让边框成为结构一部分，必须用border
border-collapse: collapse 下 outline 完全失效
当表格启用了 border-collapse: collapse，所有单元格的 border 会按规则合并（粗者胜出、同宽则颜色深者胜出），但 outline 不参与这个过程——它既不合并，也不被裁切，而是直接画在渲染层最上方。结果就是：outline 线条可能覆盖在相邻单元格内容上，或与已合并的 border 错位重叠，视觉混乱。
更隐蔽的问题是：某些浏览器（如 Safari）在 collapse 模式下会静默忽略 <td> 的 <code>outline，连 outline-offset 都不生效，开发者误以为样式没加载。
- 只要用了
border-collapse: collapse，就别给<td> 或 <code><th> 设 <code>outline - 若需 hover 高亮且保持 collapse 行为，改用
box-shadow: 0 0 0 2px #3498db模拟外发光效果，它不受 collapse 影响 -
outline在表头<th> 上表现稍稳定，但仍建议统一用 border + transition 控制 hover 状态 <h3>outline 支持 focus 状态，border 不自动响应</h3> <p><code>outline的原始设计目的就是标记焦点元素，浏览器默认会在tab切入<td>（如果可聚焦）时自动加上 <code>outline。而border不具备这种语义行为，你得手动写:focus伪类并确保<td> 有 <code>tabindex才能触发。但注意：
<td> 默认不可聚焦，加了 <code>tabindex="0"后才能被键盘导航命中——这时 outline 自动出现，而 border 不会变。如果你希望键盘用户看到清晰焦点指示，outline 是更轻量的选择；如果要求鼠标悬停和键盘聚焦效果一致，就得同时维护两套样式。- 可聚焦的单元格务必设
outline: none并用border或box-shadow重写 :focus 样式，否则默认 outline 可能与设计色冲突 - 禁用默认 outline 后，别忘了用
prefers-reduced-motion媒体查询控制动画强度，避免对运动敏感用户造成不适 - 辅助技术（如屏幕阅读器）依赖 outline 的存在判断焦点位置，随意移除且未提供替代方案会损害可访问性
圆角与 outline 的兼容性陷阱
border-radius对border生效，但对outline完全无效——无论你怎么设border-radius: 8px，outline始终是直角矩形。这在卡片式表格或圆角数据单元格中特别明显：border 圆润，outline 却突兀地戳出来。更麻烦的是，outline 不受
overflow: hidden约束，哪怕你在<td> 上设了 <code>border-radius: 6px和overflow: hidden，outline 依然会完整画满整个矩形区域，溢出圆角边界。- 需要圆角边框效果时，必须用
border+border-radius，outline 无法替代 - 若用
outline做临时高亮，记得同步设置border-radius到父容器或伪元素，否则视觉割裂 - 移动端 touch 交互中，outline 的直角在高 DPR 屏幕上可能像素模糊，border 则更锐利可控
- 可聚焦的单元格务必设
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
