Question

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

所以我对这个主题进行了很好的研究：How to get box-shadow on left & right sides only

解决方案很棒。我唯一的问题是我正在处理的这个特定网站有不同的行。这会使盒阴影保持一致。无论如何要解决这个问题吗？

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

希望你们能帮助我！

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

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

Answer 1

您可能希望将元素包装在一个<div>中，然后将所需效果应用于它。

但正如评论中所提到的，您可能希望在您的问题中添加一些代码。

左右框阴影如何只在不同元素

1 个答案: