css - 使用 CSS 仅隐藏 Div 的底部阴影

Question

我想在除底部以外的每一侧都显示盒子阴影。

这是我正在使用的 CSS。

box-shadow: 0 0 12px 4px #ddd;

如何去除底部阴影？

Answer 1

你不能只改变一个轴上的阴影尺寸(即你不能只减少阴影的高度)。一种技巧是将阴影添加到伪元素 并降低该元素的高度。

.shadow {
  margin:20px;
  width:400px;
  height:200px;
  background:red;
  position:relative;
  }
/* Pseudo element for adding shadow */
.shadow:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:16px;
  box-shadow: 0 0 12px 4px #999;
  z-index:-1;
}
  

<div class="shadow"></div>