不影响侧边框的 Css 边框/线条样式

Question

您好，我正在尝试创建与此类似的行:

我的页面由用户向下滚动时颜色交替变化的部分组成。然而，它有点乏味。我只是想知道如何在图片中的部分之间创建边界线效果？

我知道如何制作边框阴影等......但是当我这样做时......它会影响盒子的所有侧面。我只想影响该部分的顶部和底部位...而不是两侧。

我也尝试过使用 mox 盒阴影:

-webkit-box-shadow: 0px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 7px 5px 0px rgba(50, 50, 50, 0.75);

但它们在部分之间不可见。

谢谢。

Answer 1

您需要向阴影添加负像素以将其带回来。

div {width: 100%;
  height: 100px;
  box-shadow: 0px 18px 15px -18px rgba(50, 50, 50, 0.75);
}

<div></div>