CSS 如何在一个div的顶部不显示box shadow

在本文中，我们将介绍如何在CSS中实现不在一个div的顶部显示box shadow的效果。box shadow是一种常用的CSS属性，用于在元素周围创建一个阴影效果。然而，有时候我们希望只显示元素底部的阴影效果，而不显示顶部的阴影。

阅读更多：CSS 教程

使用多个box shadow

一种方法是使用多个box shadow属性，并将其中一个设置为透明。通过调整每个box shadow属性的水平位置、垂直位置、模糊半径和颜色，我们可以实现只在底部显示阴影的效果。

div {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5),
              0px -10px 10px rgba(0, 0, 0, 0); 
}

上述示例中，第一个box shadow属性设置了水平位置为0px，垂直位置为10px，并且用rgba(0, 0, 0, 0.5)作为阴影颜色。第二个box shadow属性设置了水平位置为0px，垂直位置为-10px，并且用rgba(0, 0, 0, 0)作为阴影颜色，即透明，这样就实现了底部有阴影，顶部无阴影的效果。

使用:before伪元素

另一种方法是使用:before伪元素来创建顶部的背景色，以覆盖box shadow。通过设置:before伪元素的宽度、高度、背景色和位置，我们可以实现自定义的顶部样式，从而达到无顶部阴影的效果。

div {
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: white;
}

div:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

上述示例中，我们使用了:before伪元素来创建一个位于div顶部的白色背景，宽度为100%，高度为10px，覆盖掉box shadow。同时，我们使用:after伪元素来在div底部创建box shadow效果。

使用背景图像

还有一种方法是使用背景图像来替代box shadow效果。通过创建一个背景图像，只包含底部的阴影效果，我们可以实现不显示顶部阴影的效果。

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(bg-image.jpg);
  background-position: center bottom, center;
  background-repeat: no-repeat;
  background-size: 100% 10px, auto;
}

上述示例中，我们使用了linear-gradient创建了一个渐变背景图像，并使用rgba(0, 0, 0, 0.5)作为阴影颜色。同时，我们使用url()函数来引入一个背景图像，并通过background-position设置了两个背景图像的位置，其中第一个背景图像的位置是居中底部，宽度100%，高度10px；第二个背景图像的位置是居中，根据图像的原始宽高比例进行自动缩放。