如何让 box-shadow 左右只在不同元素上无缝显示

Question

.row {
  height: 300px;
  width: 300px;
  margin: 0 auto;
  box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3);
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

.row {
height: 300px;
width: 300px;
margin: 0 auto;
box-shadow: -8px 0 8px -8px black, 10px -1px 8px -8px black;
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

所以我仔细看了一下这个话题：How to get box-shadow on left & right sides only

而且解决方案很棒。我唯一的问题是我正在处理的这个特定站点有不同的行。这会导致 box-shadow 保持一致。有没有办法解决这个问题？

我会放一些图片作为参考。

希望你们能帮助我！

第一个解决方案：https://i.stack.imgur.com/jzyVk.png

第二种解决方案：https://i.stack.imgur.com/DLx5p.png

Answer 1

您可能希望将元素包装在单个 <div> 中，然后对其应用所需的效果。

但正如 cmets 中所述，您可能希望在问题中添加一些代码。