使用 outline 替代 border 可避免悬停时因盒模型变化导致的单元格尺寸抖动，保持表格布局稳定，同时实现视觉高亮效果。
使用 `outline` 替代 `border` 可避免悬停时因盒模型变化导致的单元格尺寸抖动，保持表格布局稳定，同时实现视觉高亮效果。
在 CSS 中，border 会直接影响元素的盒模型（box model）——它被计入元素的总宽度和高度中。当你为 <td> 元素设置 <code>border: 4px solid darkblue 时，浏览器会在原有内容区域外新增 4px 边框，导致单元格实际占用空间增大，进而触发表格重排（reflow），使相邻单元格的宽高发生偏移或挤压。
而 outline 是绘制在元素外部且不占据布局空间的装饰性线条，它不会改变元素的尺寸、位置或影响其他元素的排版。因此，用 outline 实现悬停高亮是解决该问题最简洁、语义正确且兼容性良好的方案。
✅ 推荐写法（精简、可维护、无需手动缩放尺寸）：
.td_index_intro_1,
.td_index_intro_2,
.td_index_intro_3,
.td_index_intro_4 {
max-width: 500px;
max-height: 300px;
}
/* 统一 hover 样式，避免重复代码 */
.td_index_intro_1:hover,
.td_index_intro_2:hover,
.td_index_intro_3:hover,
.td_index_intro_4:hover {
outline: 4px solid darkblue;
cursor: pointer;
}
⚠️ 注意事项：
-
outline默认可能带有浏览器默认的outline-offset（如 Chrome 对聚焦元素有偏移），若需紧贴单元格边缘，可显式设为outline-offset: 0; -
outline不支持圆角（border-radius对其无效），如需圆角高亮，应改用border+box-sizing: border-box并预先预留边框空间（见进阶方案） - 若必须使用
border，应在常态下就定义透明边框，例如：td { border: 4px solid transparent; box-sizing: border-box; } td:hover { border-color: darkblue; }此方式通过
box-sizing: border-box将边框纳入尺寸计算，确保悬停前后总尺寸恒定。
? 总结：优先选用 outline 实现非侵入式悬停高亮；它零布局干扰、代码简洁、性能友好，是表格交互设计中的最佳实践之一。
