background-color перекрывает box-shadow

Question

Для всех td в таблице задан box-shadow вместо border. У некоторых ячеек есть другой цвет фона, но он перекрывает box-shadow. Как не перекрывать? background-clip к ячейкам с фоном пробовал все варианты, не работает.

table {
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 100px;
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.2);
}

.background1 {
  background: red;
}

.background2 {
  background: yellow;
}

.background3 {
  background: pink;
}

.background4 {
  background: pink;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="background1"></td>
    <td class="background2"></td>
    <td class="background3"></td>
    <td class="background4"></td>
  </tr>
</table>

Answer 1

table {
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 100px;
  box-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, 0.2);
}

.background1 {
  background: red;
}

.background2 {
  background: yellow;
}

.background3 {
  background: pink;
}

.background4 {
  background: pink;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="background1"></td>
    <td class="background2"></td>
    <td class="background3"></td>
    <td class="background4"></td>
  </tr>
</table>

БЛОГ НА HUSL

background-color перекрывает box-shadow

Ответы (1 шт):