Css 如何在表格行上重叠方框阴影？

我有一个表，我想通过在其周围应用方框阴影来突出显示一些连续的行TR

我的策略是将一个名为selected top的类应用于选择的第一行，将类选择middle作为中间部分，将selected bottom作为最后一行

但是，中间行的阴影会溢出。我试图通过使用z-index来纠正这一点，我知道我必须用它添加一个相对属性，所以我这样做了，但它们似乎没有效果：

代码如下：

  tr.selected-top {
    box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;
    position: relative;
    z-index:10;
  }
  tr.selected-middle {
    box-shadow: -5px 0px 5px #000, 5px 0px 5px #000;
    position: relative;
    z-index: -1;
  }

该表只是一个常规表：

<table>
<tr><td>stuff</td></tr>
<tr class="selected-top"><td>highlighting starts</td></tr>
<tr class="selected-middle"><td>highlighting middle</td></tr>
<tr class="selected-bottom"><td>highlighting end</td></tr>
<tr><td>other stuff</td></tr>
</table>

我做错了什么

顺便说一句，我尝试只在中间行的边上应用阴影，但这样阴影就不连续了

更新：@Aditya Toke，像这样：左边是错误的着色，右边是正确的着色

桌子{ 高度：67vh； 宽度：59vw； 背景色：333； } 运输署{ /*背景色：333*/ 颜色：白色； } div{ 显示器：flex； 证明内容：中心； 对齐项目：居中； } .1分部{ 盒影：-5px-5px 5px 000，5px-5px 5px 000； 身高：100%； 边框：1px实心暗灰色； 左边框：0； 右边界：0； } .第2分部{ 盒影：-4px 0px 2px 0.5px 000，2px 0px 0.5px 000，5px 0.5px 3px 0px 000； 身高：100%； 边框：1px实心333； } .第3分部{ 盒影：-6px 3px 5px 000，6px 5px 6px 1px 000； 身高：100%； 位置：相对位置； 边框：1px实心暗灰色； 左边框：0； 右边界：0； } 东西 突出显示开始 突出显示中间 突出显示结尾 其他东西 桌子{ 高度：67vh； 宽度：59vw； 背景色：333； } 运输署{ /*背景色：333*/ 颜色：白色； } div{ 显示器：flex； 证明内容：中心； 对齐项目：居中； } .1分部{ 盒影：-5px-5px 5px 000，5px-5px 5px 000； 身高：100%； 边框：1px实心暗灰色； 左边框：0； 右边界：0； } .第2分部{ 盒影：-4px 0px 2px 0.5px 000，2px 0px 0.5px 000，5px 0.5px 3px 0px 000； 身高：100%； 边框：1px实心333； } .第3分部{ 盒影：-6px 3px 5px 000，6px 5px 6px 1px 000； 身高：100%； 位置：相对位置； 边框：1px实心暗灰色； 左边框：0； 右边界：0； } 东西 突出显示开始 突出显示中间 突出显示结尾 其他东西 您可以使用：：before和：：after伪元素来屏蔽中间行的顶部和底部阴影

伪元素的高度设置为完全等于遮罩阴影的长度，并且是绝对位置

由于阴影隐藏了选定底部的顶部边框，并且是下一个同级元素，因此我们需要将它们添加回：

tr.selected-middle td,
tr.selected-bottom td {
  border-bottom: 1px solid #666;
}

身体{ 背景色：1B1B； 利润率：20px； } 桌子{ 字体系列：arial，无衬线； 边界塌陷：塌陷； 宽度：自动； 框大小：边框框； 边界：无； 保证金：自动； } tr{display:block；} tr，td{ 高度：50px； 背景：333人； 颜色：eee； } 运输署{ 左侧填充：16px； 最小宽度：170px； 宽度：100%； 边框顶部：1px实心666； } tr.selected-top{ 位置：相对位置； 盒影：-5px-5px 5px 000，5px-5px 5px 000； } 中选{ 位置：相对位置； 盒影：0px 0px 5px 000； } 选择底部{ 位置：相对位置； 盒影：5px 5px 5px 000，-5px 5px 5px 000； } tr.selected-middle：：之前， tr.selected-middle:：after{ 指针事件：无； 位置：绝对位置； 内容：； 背景色：333； 左：0； 宽度：100%； } tr.selected-middle:：before{ 高度：10px； 顶部：-10px； } tr.selected-middle:：after{ 顶部：calc100%+4px； 高度：5px； } tr.中选td， tr.选择底部td{ 边框底部：1px实心666； } 一些东西 突出显示开始 突出显示中间 突出显示结尾 一些东西 您可以使用：：before和：：after伪元素来屏蔽中间行的顶部和底部阴影

伪元素的高度设置为完全等于遮罩阴影的长度，并且是绝对位置

由于阴影隐藏了选定底部的顶部边框，并且是下一个同级元素，因此我们需要将它们添加回：

tr.selected-middle td,
tr.selected-bottom td {
  border-bottom: 1px solid #666;
}

身体{ 背景色：1B1B； 利润率：20px； } 桌子{ 字体系列：arial，无衬线； 边界塌陷：塌陷； 宽度：自动； 框大小：边框框； 边界：无； 保证金：自动； } tr{display:block；} tr，td{ 高度：50px； 背景：333人； 颜色：eee； } 运输署 { 左侧填充：16px； 最小宽度：170px； 宽度：100%； 边框顶部：1px实心666； } tr.selected-top{ 位置：相对位置； 盒影：-5px-5px 5px 000，5px-5px 5px 000； } 中选{ 位置：相对位置； 盒影：0px 0px 5px 000； } 选择底部{ 位置：相对位置； 盒影：5px 5px 5px 000，-5px 5px 5px 000； } tr.selected-middle：：之前， tr.selected-middle:：after{ 指针事件：无； 位置：绝对位置； 内容：； 背景色：333； 左：0； 宽度：100%； } tr.selected-middle:：before{ 高度：10px； 顶部：-10px； } tr.selected-middle:：after{ 顶部：calc100%+4px； 高度：5px； } tr.中选td， tr.选择底部td{ 边框底部：1px实心666； } 一些东西 突出显示开始 突出显示中间 突出显示结尾 一些东西

---

您不需要在tr前面加句号“.”，CSS选择器就可以为元素设置样式。e、 g.tr.selected-top@yinsweet哦，那只是把答案简单化的一个错误。更正，问题仍然存在。@svenema您能提供您获得的输出和预期输出的完整图像吗output@Adityatoke; 屏幕截图补充道，如果我的问题没有说清楚，我深表歉意。@svenema感谢您的屏幕截图可以为您提供解决方案，您不需要句号“.”在tr前面让CSS选择器为元素设置样式。e、 g.tr.selected-top@yinsweet哦，那只是把答案简单化的一个错误。更正，问题仍然存在。@svenema您能提供您获得的输出和预期输出的完整图像吗output@Adityatoke; 屏幕截图补充道，如果我的问题没有说清楚，我深表歉意。@svenema感谢您的屏幕截图将为您提供解决方案结果很好，但我不完全理解解决方案。你能不能再解释一下。似乎玩弄高度能让你掩盖阴影？我试着在答案中添加一个解释。是的，qseudo元素的高度掩盖了阴影。结果很好，但我不完全理解这个解决方案。你能不能再解释一下。似乎玩弄高度能让你掩盖阴影？我试着在答案中添加一个解释。是，qseudo元素高度遮罩阴影。