我想在表中的所有元素上渲染长方体阴影效果。这是我能得到的最接近我想要的东西：
body{
background: #000;
}
table{
margin:0px;
padding:0px;
display: inline-block;
background: #aaa;
box-shadow: inset 1px 1px 20px 20px rgba(0, 0, 0, 1);
}
img{
margin: 10px;
}<body>
<table>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
</table>
</body>阅读了关于stackoverflow的多个问题，我发现最好的方法是在容器(在本例中是表(结束之前创建一个div或一个伪元素，并将效果应用于它。但当我尝试这样做时，我最终会把容器弄得过多/溢出。我尝试更改这两个元素(容器和div(的多个参数，但没有成功。在下一个代码片段中，出于调试目的，阴影为绿色，表的边框为红色。
body{
background: #000;
}
table{
border:2px solid red ;
display: inline-block;
background: #aaa;
border-radius:5px;
}
#boxShadow{
position: absolute;
height: 100%;
width: 100%;
box-shadow: inset 1px 1px 20px 20px rgba(0, 255, 0, 1);
}
img{
margin: 10px;
}<body>
<table>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<div id="boxShadow"></div>
</table>
</body>代码也在jsfiddle.com中：http://jsfiddle.net/h0rf42m7/1/
我创建了一个新的div来包含表，从而使它正常工作：
body{
background: #000;
}
table{
position: relative;
background: #aaa;
border-radius:5px;
margin: 0px;
padding: 0px;
}
#container{
position: relative;
display:inline-block;
}
#boxShadow{
position: absolute;
top:0;
height: 100%;
width: 100%;
box-shadow: inset 1px 1px 20px 20px rgba(0, 0, 0, 1);
}
img{
margin: 10px;
}<body>
<div id="container">
<table border = 1>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
<tr><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td><td><img src="https://miro.medium.com/max/1200/0*VU152GltXiWeD0Xy.png" height=20%></td></tr>
</table>
<div id="boxShadow">
</div>
</div>
</body>效果很美！