如何防止背景颜色隐藏框阴影？

Question

将 background-color 添加到 td 或 tr 会隐藏父 table 上的 box-shadow。

最小示例：

table {
  box-shadow: inset -1px -1px 0 0 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px 1px 0 0 blue;
}

.highlight {
  background-color: #efe;
}

<table>
  <tr>
    <td>box shadow border fine here</td>
  </tr>
   <tr>
    <td>and here</td>
  </tr>
  <tr class="highlight">
    <td>but not with background-color</td>
  </tr>
</table>

我正在使用 box-shadow 在 table 上伪造边框。我在每个 td 上显示 "top and left"，在 table 上显示 "bottom and right" 以填补缺失的部分。

但是如果我的 table 中的任何 td 或 tr 有一个 background-color (.highlight) box-shadow 来自 table消失了。

（至于我为什么这样做，是因为我在网站上设置了垂直节奏，这也适用于 table 中的文本。如果我使用标准 table 边框和我的标准行高我打破了垂直节奏。即使我想通过更改行高来不完美地考虑边框我也不能因为文本可能会换行使我对行高的边框调整适用于每一行文本对于文本块只有一次。）

Answer 1

使用没有任何偏移的方框阴影。像这样：

table {
  border-collapse: collapse;
  border-spacing: 0;

}

td {
  box-shadow: inset 0px 0px 1px blue;
}

.highlight {
  background-color: yellow;
}

Answer 2

将背景大小限制为比总大小小 1 像素。为此使用 calc (100% - 1px)：

table {
  border-collapse: collapse;
  border-spacing: 0;
}


table {
  box-shadow: inset -1px -1px 0 0 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px 1px 0 0 blue;
}

.highlight td {
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
}
.highlight td:last-child {
  background-size: calc(100% - 1px) 100%;
}
.highlight:last-child td {
  background-size: 100% calc(100% - 1px);
}
.highlight:last-child td:last-child {
  background-size: calc(100% - 1px) calc(100% - 1px);
}

<table>
  <tr>
    <td>box shadow border fine here</td>
    <td>-</td>
  </tr>
   <tr>
    <td>and here</td>
    <td>-</td>
  </tr>
  <tr class="highlight">
    <td>but not with background-color</td>
    <td>(second cell to illustrate gap)</td>
  </tr>
  <tr class="highlight">
    <td>second row to illustrate gap</td>
    <td>-</td>
  </tr>
</table>

获得此结果的另一种方法，在 td 上使用阴影而不是 table:

table {
  border-collapse: collapse;
  border-spacing: 0;
}


table {
  box-shadow: inset -1px -1px 0 0 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px 1px 0 0 blue;
}

td:last-child {
  box-shadow: inset 1px 1px 0 0 blue, inset -1px 0px 0 0 blue;
}

tr:last-child td {
  box-shadow: inset 1px 1px 0 0 blue, inset 0px -1px 0 0 blue;
}

tr:last-child td:last-child {
  box-shadow: inset 1px 1px 0 0 blue, inset -1px -1px 0 0 blue;
}

.highlight td {
  background-color: yellow;
}

<table>
  <tr>
    <td>box shadow border fine here</td>
    <td>-</td>
  </tr>
   <tr>
    <td>and here</td>
    <td>-</td>
  </tr>
  <tr class="highlight">
    <td>but not with background-color</td>
    <td>(second cell to illustrate gap)</td>
  </tr>
  <tr class="highlight">
    <td>second row to illustrate gap</td>
    <td>-</td>
  </tr>
</table>

如何防止背景颜色隐藏框阴影？

How to prevent background-color from hiding box-shadow?

html

css

border

box-shadow