Question

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

最小例子：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我正在使用box-shadow伪造桌面上的边框。我正在展示＆＃34;顶部和左边＆＃34;在每个td和＆＃34;底部和右边＆＃34;在table本身填写缺失的部分。

但如果我的表格中的任何td或tr都有background-color（.highlight），那么来自box-shadow的{{1}}就会消失。

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

Answer 1

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

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

}

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

.highlight {
  background-color: yellow;
}

Answer 2

将背景大小限制为比总大小小1 px。使用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 {
  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>

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

2 个答案: