如何只让盒子底部有有阴影

如果你想在CSS中仅给盒子的底部添加阴影效果，你可以使用伪元素`::before`或`::after`结合`box-shadow`属性来实现。这里是一个例子：

.box {
  position: relative; /* 或者relative/fixed等定位方式 */
  padding-bottom: calc(阴影高度 + 阴影模糊半径); /* 添加足够的空间容纳阴影 */
}

.box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: <阴影样式>; /* 下部阴影比如 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); */
}

在这个例子中，`.box::before`伪元素会覆盖在真实内容之上，并且设置阴影样式。通过调整`padding-bottom`，可以确保阴影不会影响到实际内容。

如果你想要的是边框底部带阴影的效果，可以使用边框而非伪元素：

.box {
  border-top: none; /* 确保只有下边界有阴影 */
  border-bottom-width: <阴影宽度>;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: <颜色值> /* 设置阴影颜色 */;
  box-shadow: <阴影样式>;
}