<分区>
我在一个容器里放了几个盒子。容器设置为 overflow: hidden 以确保一切都在原位。移除 overflow: hidden 不是一种选择，因为这样做会导致内容溢出，否则它会调整大小以适应容器。
我试图给盒子一个 box-shadow，但是这样做时，容器边缘的盒子边缘的阴影没有显示出来(见下图), 因为父容器停在那里并且没有溢出。
如绿色箭头所示，左侧的两个框按预期显示了阴影。如红色箭头所示，右侧两个框的阴影在每个与容器相接的右边缘被裁剪。
有什么办法解决这个问题吗？
一个简单的复制:
注意:此代码片段是由社区编辑而非作者添加的，目的是重现这些症状。它不反射(reflect)作者用于生成附加图像的实际代码。
.container {
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
row-gap: 1rem;
}
.shadow {
display: inline-block;
height: 2rem;
background-color: tomato;
box-shadow: 0 0 0.25rem black;
}<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>