标签的BoxShadow不能连续

Question

我今天从表格开始，偶然发现许多问题。我试图做的主要事情是一张桌子，在其下方有边框半径和边框+框阴影。

我尝试的第一件事是使用border-collapse：折叠属性。 但是在使用此功能之后，不可能仅通过CSS为表格赋予边界半径。所以我不认为这是一个选择。

由于tr标签似乎不适用于border和box-shadow属性，因此我不得不使用每个单独的th标签。但是这样做之后，我在每个th标签之间都留有奇怪的空白（以红色标记）。边框本身很好，但是盒子阴影中有那些奇怪的空白。

这里是HTML代码（仅2行，而不是所有16行：D）：

<table class="VitaTable">
 <tr>
  <th class="VitaTableHeaderL">Jahr</th>
  <th class="VitaTableHeader">Titel</th>
  <th class="VitaTableHeader">Rolle</th>
  <th class="VitaTableHeader">Regie</th>
  <th class="VitaTableHeader">Sender</th>
  <th class="VitaTableHeaderR"> . </th>
 </tr>
 <tr>
  <td class="VitaTableInfoL">2018</td>
  <td class="VitaTableInfo">Broadcast Yourself</td>
  <td class="VitaTableInfo">(HR) Michael Grünewald</td>
  <td class="VitaTableInfo">Manuel Eglhofer</td>
  <td class="VitaTableInfo">Hochschule Ansbach</td>
  <td class="VitaTableInfoR"><a href="https://website.com" alt="Videotitel"><img class="VitaPlaybutton" src="Picture></a></td>
 </tr>
 <tr>
  <td class="VitaTableInfoL">2018</td>
  <td class="VitaTableInfo">Crossroads</td>
  <td class="VitaTableInfo">(HR) Jonas Hartmann</td>
  <td class="VitaTableInfo">Hannes Müller</td>
  <td class="VitaTableInfo">Hochschule Ansbach</td>
  <td class="VitaTableInfoR"></td>
 </tr>
</table>

我正在使用类，因为我可能想做另一个表，看上去完全不同。这是CSS：

/* Table */
table.VitaTable {
  border: 1px solid #424242;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 5px #e4e4e4;
}

/* Header*/

th.VitaTableHeaderL {
  border-bottom: 1px solid #424242;
  box-shadow: 0px 6px 3px -3px #e4e4e4;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
}

th.VitaTableHeader {
  border-bottom: 1px solid #424242;
  box-shadow: 0px 6px 3px -3px #e4e4e4;
  padding-top: 10px;
  padding-bottom: 10px;
}

th.VitaTableHeaderR {
  border-bottom: 1px solid #424242;
  box-shadow: 0px 6px 3px -3px #e4e4e4;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
}

/* Info */

td.VitaTableInfoL {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 12px;
}

td.VitaTableInfo {
  padding-top: 7px;
  padding-bottom: 7px;
}

td.VitaTableInfoR {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 12px;
}

.VitaPlaybutton {
  width: 20px;
}

有没有一个我容易忽略的解决方案？我将不胜感激，并在此先多谢。 ：）

Answer 1

这是因为您的spread-radius的值为负，因此它给阴影加了阴影。

您最好的选择是在thead周围添加一个th并将其应用于此，或者如果您不能更改HTML结构，则可以执行以下操作：

table.VitaTable tr:first-chidild {
  box-shadow: 0px 6px 3px -3px #e4e4e4;
}

然后从所有box-shadow的{​​{1}}删除

JSFiddle showing the thead approach