css - Boxshadow 仅在侧面

Question

我需要只在侧面显示一个 boxshadow。在 div 的底部没有阴影。我的 boxshadow css 在侧面和底部提供阴影，如下所示:

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

阅读我试过的关于 stackoverflow 的其他帖子:

box-shadow: 5px 0px 0px rgba(0, 0, 0, 0.3);

但是不起作用。任何有关如何实现效果的帮助将不胜感激。谢谢!

Answer 1

您可以使用伪元素来覆盖顶部/底部阴影。

div {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  width: 100px; 
  height: 100px;
  margin: auto;
  position: relative;
}
div:before, div:after {
  position: absolute;
  left: 0; right: 0;
  content: '';
  background: white;
}
div:before {
  height: 2px; /* 3px - 1px */
  top: 0;
  transform: translateY(-100%);
}
div:after {
  bottom: 0;
  transform: translateY(100%);
  height: 4px; /* 3px + 1px */
}

<div></div>