这是我的 HTML 代码:
<style>
.yellow{
background-color: yellow;
}
td{
width:40px;
}
tr:first-child {
box-shadow: 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>
目标是在第一行周围有一个阴影。问题是单元格 4 的背景色遮住了它。
我的问题是:如何让 drop show 显示在单元格 4 的背景之上?
编辑:请参阅后续问题:css inset box-shadow for table row?
最佳答案
降低下一个单元格的 z-index:
.yellow {
background-color: yellow;
}
td {
width: 40px;
}
tr:first-child {
box-shadow: 1px 1px 5px 5px #d99292;
}
tr:first-child + tr td {
position: relative;
z-index: -1;
}
/* the below is not mandatory but to make sure
the cells doesn't go below the table */
table {
position:relative;
z-index:0;
}
<table>
<tr>
<td class=yellow>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td class=yellow>4</td>
</tr>
</table>
关于html - 表格行的CSS框阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64342001/