outline不占布局空间且不参与盒模型计算，而border会撑开盒子影响表格结构；outline在border-collapse:collapse下失效，需用box-shadow替代；outline支持焦点语义但不响应border-radius，圆角效果必须用border实现。
outline不占布局空间，border会撑开盒子
给 <td> 加 outline 看起来像加了边框，但实际它完全游离在盒模型之外：不触发重排、不增加 width/height、不影响相邻单元格间距。而 border 是盒模型的一部分，一旦设为 2px solid red，<td> 的实际宽度就多了 4px（左右各 2px），可能让整列变宽或换行。
常见错误是用 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> 的 outline，连 outline-offset 都不生效，开发者误以为样式没加载。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只要用了
border-collapse: collapse，就别给<td>或<th>设outline - 若需 hover 高亮且保持 collapse 行为，改用
box-shadow: 0 0 0 2px #3498db模拟外发光效果，它不受 collapse 影响 -
outline在表头<th>上表现稍稳定，但仍建议统一用 border + transition 控制 hover 状态
outline 支持 focus 状态，border 不自动响应
outline 的原始设计目的就是标记焦点元素，浏览器默认会在 tab 切入 <td>（如果可聚焦）时自动加上 outline。而 border 不具备这种语义行为，你得手动写 :focus 伪类并确保 <td> 有 tabindex 才能触发。
但注意：<td> 默认不可聚焦，加了 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> 上设了 border-radius: 6px 和 overflow: hidden，outline 依然会完整画满整个矩形区域，溢出圆角边界。
- 需要圆角边框效果时，必须用
border+border-radius，outline 无法替代 - 若用
outline做临时高亮，记得同步设置border-radius到父容器或伪元素，否则视觉割裂 - 移动端 touch 交互中，outline 的直角在高 DPR 屏幕上可能像素模糊，border 则更锐利可控
