CSS 盒子阴影 – 仅顶部和底部

在本文中，我们将介绍CSS中如何使用盒子阴影属性来只在顶部和底部添加阴影效果。CSS的盒子阴影属性是一种强大的样式特性，它可以为元素添加具有立体感的效果，使元素在页面上脱颖而出。通过控制盒子阴影的属性值，我们可以根据需要为元素添加各种效果，包括只在顶部和底部添加阴影。

阅读更多：CSS 教程

设置顶部和底部阴影

使用CSS的box-shadow属性可以为元素添加阴影效果。具体到只给顶部和底部添加阴影，我们可以通过指定合适的偏移量和模糊半径来实现。

下面是一个使用CSS盒子阴影属性设置只给顶部和底部添加阴影的示例：

.shadow {
  box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.5), /* 顶部阴影 */
              0px 10px 20px rgba(0, 0, 0, 0.5); /* 底部阴影 */
}

在上述示例中，我们通过设置box-shadow属性的两个值来分别表示顶部和底部的阴影效果。第一个值0px -10px 20px rgba(0, 0, 0, 0.5)表示顶部的阴影，其偏移量为0px（水平方向不偏移，即在水平方向上与元素重合），垂直方向上向上偏移10px，模糊半径为20px，颜色为黑色（rgba(0, 0, 0, 0.5)）。第二个值0px 10px 20px rgba(0, 0, 0, 0.5)表示底部的阴影，其偏移量为0px（水平方向不偏移），垂直方向上向下偏移10px，模糊半径为20px，颜色为黑色。通过这样的设置，我们就成功地实现了只在顶部和底部添加阴影的效果。

自定义阴影样式

除了使用默认的阴影效果，我们还可以自定义阴影的样式，以满足不同的设计需求。

阴影颜色

通过调整rgba中的RGB值和透明度值，我们可以改变阴影的颜色。例如，将阴影的颜色设置为红色，可以将颜色值改为rgba(255, 0, 0, 0.5)。

.shadow {
  box-shadow: 0px -10px 20px rgba(255, 0, 0, 0.5),
              0px 10px 20px rgba(255, 0, 0, 0.5);
}

阴影大小

通过调整模糊半径的值，我们可以改变阴影的大小。模糊半径值越大，阴影越模糊，大小越大。例如，将模糊半径调整为40px，可以得到更加扩散的阴影效果。

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

均匀阴影

如果想要实现均匀阴影效果，我们可以将两个阴影的偏移量和模糊半径设为相同的值。

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

总结

通过使用CSS的box-shadow属性，我们可以轻松地为元素添加仅在顶部和底部的盒子阴影效果。通过调整阴影的偏移量、模糊半径和颜色，我们还可以自定义阴影的样式，以满足不同的设计需求。希望本文对你了解CSS的盒子阴影属性有所帮助！