CSS Inset Box-Shadow für Tabellenzeile?

Question

siehe meine verwandte noch andere Frage: CSS-Box-Schatten für Tabellenzeile?

Hier ist mein HTML-Code:

<style>
.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
}
</style>
<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

Das Ziel ist es, in der ersten Reihe einen Schlagschatten zu haben. Das Problem ist, dass die Hintergrundfarbe von Zelle 1 sie verdeckt.

Meine Frage ist: Wie kann ich die Inset-Drop-Show über dem Hintergrund von Zelle 1 anzeigen lassen?

Answer 1

Sie können es auch versuchen mix-blend-mode

Die mix-blend-modeCSS-Eigenschaft legt fest, wie der Inhalt eines Elements mit dem Inhalt des übergeordneten Elements und dem Hintergrund des Elements gemischt werden soll.

.yellow{
    background-color: yellow;
    mix-blend-mode:multiply
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
 /*optionnal :
    background:white ; 
  to avoid .yellow mixing eventually with body, or else background */
}

<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

Answer 2

Färben Sie die Tabellenzelle mit einem Pseudoelement, das Sie hinter dem Schatten erstellen können:

table {
  position:relative;
  z-index:-1;
}

.yellow {
  position:relative;
}
.yellow::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:yellow;
}

td {
  width: 40px;
}

tr:first-child {
  box-shadow: inset 1px 1px 5px 5px #d99292;
}

<table>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>

Answer 3

Ich habe hier eine Arbeit.

Hinzufügen eines absoluten Leerzeichens tr, um oben zu sein.

.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    position: absolute;
    box-shadow: inset 1px 1px 5px 5px #d99292;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>