背景色隐藏其他框阴影

td tr . 当你的CSS设置 比…有更高的z指数 悬停时,它将被渲染到周围单元格的上方,以便您可以看到投射在其相邻单元格上的阴影。然而,任何阴影都不能投射在自己的孩子身上 td公司 因为他们也是和父母一起长大的。

td公司 . 这样做确实会使行的阴影显示在所有单元格的顶部,包括它自己的子单元格,但是在Chrome和Firefox中,渲染都很糟糕。

为了让它工作,你还必须确保 受z索引更改影响的元素具有 position

table tr {
  position: relative;
}

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

table tr:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}