如何防止背景颜色隐藏框阴影？ [英] How to prevent background-color from hiding box-shadow?

问题描述

将背景颜色添加到 td 或 tr 隐藏父表上的 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这里< / td> < / tr> < tr> < td>和此处< / td> < / tr> < tr class =highlight> < td>但不与背景颜色< / td> < / tr>< / table>  

box-shadow 以伪造桌子上的边框。我在表上的每个 td 和bottom and right上显示top and left

但如果 td 或 tr 在我的表中有背景颜色（ .highlight ） $>

（至于为什么我这样做） ，这是因为我在网站上设置垂直节奏，适用于表格中的文本如果我使用标准的表格边框和我的标准线高度打破垂直节奏，即使我想通过改变不完全帐户边界line-height我不能，因为文本可能会使我的边框调整到行高适用于文本的每一行，而不只是一次）。

解决方案

将背景大小限制为小于总大小1像素。对此使用calc（100％ - 1px）：

  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： -  1px）;}。highlight：last-child td：last-child {background-size：calc（100％ -  1px）calc（100％ -  1px）;}  

 < table> < tr> < td> box shadow border fine这里< / td> < td>  - < / td> < / tr> < tr> < td>和此处< / td> < td>  - < / td> < / tr> < tr class =highlight> < td>但不与背景颜色< / td> < td>（用于说明间隙的第二单元）< / td> < / tr> < tr class =highlight> < td>第二行以说明间隙< / 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这里< / td> < td>  - < / td> < / tr> < tr> < td>和此处< / td> < td>  - < / td> < / tr> < tr class =highlight> < td>但不与背景颜色< / td> < td>（用于说明间隙的第二单元）< / td> < / tr> < tr class =highlight> < td>第二行以说明间隙< / td> < td>  - < / td> < / tr>< / table>  

Adding a background-color to a td or tr hides the box-shadow on the parent table.

Minimal example:

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>

I am using box-shadow to fake borders on a table. I'm showing "top and left" on each td and "bottom and right" on the table itself to fill in the missing parts.

But if any td or tr in my table has a background-color (.highlight) the box-shadow coming from the table disappears.

(As to why I'm doing this, it's because I'm setting a vertical rhythm on the site which applies to text in tables also. If I use standard table borders and my standard line-height I break the vertical rhythm. Even if I want to imperfectly account for borders by changing the line-height I cannot because the text might wrap making my border adjustment to the line-height apply to every row of text instead of just once for the block of text.)

解决方案

Limit the background size to 1 px less than the total size. Use calc (100% - 1px) for this:

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>

Another way to get this result, playing with shadows on the td instead of the 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>

这篇关于如何防止背景颜色隐藏框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！