CSS 的 border-spacing 创建的间隙不属于任何元素，无法直接设置背景色；但可通过双 box-shadow 模拟悬停时行间距的着色效果。
css 的 `border-spacing` 创建的间隙不属于任何元素，无法直接设置背景色；但可通过双 `box-shadow` 模拟悬 hover 时行间距的着色效果。
在使用 border-collapse: separate 和 border-spacing 实现行间空隙的表格中，一个常见需求是：当鼠标悬停在 <tr> 上时，不仅高亮当前行，还希望其上下方的空白间隙（即 border-spacing 所产生的垂直间距）也呈现相同背景色。遗憾的是，border-spacing 产生的间隙是表格容器内的“透明通道”，并非 DOM 元素，也不属于 <tr>、<td> 或 <table> 的盒模型内容区域，因此无法通过 background-color 直接染色。
不过，我们可以巧妙利用 box-shadow 的扩展性和层叠特性来模拟这一效果。关键思路是：为悬停的 <tr> 添加两个方向相反、尺寸匹配 border-spacing 垂直值的 box-shadow，分别向上和向下延伸，覆盖相邻行之间的空白区域。
假设你已设置：
table {
border-collapse: separate !important;
border-spacing: 0 5px !important; /* 垂直间距为 5px */
}则对应的悬停样式应为：
tr:hover {
background-color: #ff6b6b; /* 当前行背景 */
box-shadow:
0 5px #ff6b6b, /* 向下投射 5px 高度的纯色阴影，填充下方间隙 */
0 -5px #ff6b6b; /* 向上投射 5px 高度的纯色阴影，填充上方间隙 */
}✅ 优势：无需修改 HTML 结构，兼容主流浏览器（Chrome、Firefox、Safari、Edge），且保持语义清晰。
⚠️ 注意事项：
- box-shadow 的偏移值（如 5px / -5px）必须严格等于 border-spacing 的第二个参数（垂直间距），否则会出现错位或遗漏；
- 若表格设置了 overflow: hidden 或父容器有裁剪（如 clip-path），可能遮挡阴影，需确保容器具备足够溢出空间；
- 避免与 border 或其他 box-shadow 叠加冲突——建议统一管理阴影层级，必要时使用 z-index 配合定位容器（但 <tr> 不支持 z-index，此时可考虑对 <tbody> 或包裹层做处理）；
- 此方案对 border-spacing 为动态值（如 CSS 变量）的场景不友好，若需响应式适配，建议配合 @property（现代浏览器）或 JavaScript 动态计算。
总结：虽然 CSS 本身不提供“间隙背景”的原生能力，但 box-shadow 是轻量、高效且符合标准的视觉模拟方案。它将设计意图转化为可预测的渲染行为，是解决此类布局挑战的专业实践之一。
