无父div的常见框影

Question

是否有一种方法可以为一行div设置多个框阴影，使它们看起来像在包装元素上的框阴影?
由于第三方库的限制，我不能在父元素上放置框影。
下面是代码片段——我无法去掉框阴影之间的空格。

.container {
/* THIS ELEMENT CANNOT HAVE BOX-SHADOW*/
display: flex;
flex-direction: row;
}
.child {
position: relative;
background-color: grey;
width: 160px;
height: 90px;
box-shadow: 0 -5px 5px -5px #333, 0 5px 5px -5px #333;
}

<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

Answer 1

您可以在container::before上应用阴影，并将伪元素保留在子元素下面。

.container {
/* THIS ELEMENT CANNOT HAVE BOX-SHADOW */
display: flex;
flex-direction: row;
position: relative;
width: max-content; 
}
.container::before {
content: "";
position: absolute;
z-index: 0;
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: 0 -5px 5px -5px #333, 0 5px 5px -5px #333;

}

.child {
position: relative;
background-color: grey;
width: 160px;
height: 90px;
}

<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>