CSS 如何只在左侧、右侧和底部创建盒子阴影

在本文中，我们将介绍如何使用 CSS 在盒子的左侧、右侧和底部创建阴影效果。盒子阴影是一种常见的网页设计效果，可以通过添加阴影效果使元素在页面上更加突出。

要实现创建只在左侧、右侧和底部显示的盒子阴影，我们可以使用 CSS 的 box-shadow 属性。box-shadow 属性可以用来添加元素的阴影效果，包括水平和垂直方向上的偏移距离、模糊半径和颜色。

下面是一个示例，演示如何只在左侧、右侧和底部创建盒子阴影：

.box {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5), -10px 0px 10px rgba(0, 0, 0, 0.5), 0px 10px 10px rgba(0, 0, 0, 0.5);
}

在上面的示例中，我们创建了一个宽度和高度为 200px 的盒子，并设置了背景颜色为 #f2f2f2。然后，我们使用 box-shadow 属性来添加阴影效果。通过在 box-shadow 属性中指定水平和垂直方向的偏移距离，我们可以决定阴影是在元素的左侧、右侧和底部显示。通过设置同一个颜色和模糊半径，我们可以使阴影看起来是连续的。

在本示例中，我们在盒子的左侧创建了一个阴影，偏移距离为 10px，使用了 rgba(0, 0, 0, 0.5) 的颜色和模糊半径为 10px。然后，我们在盒子的右侧创建了一个相同的阴影，偏移距离为 -10px，使用了相同的颜色和模糊半径。最后，我们在盒子的底部也创建了一个相同的阴影，偏移距离为 0px（即没有垂直方向上的偏移），使用了相同的颜色和模糊半径。

你可以根据需要调整偏移距离、模糊半径和颜色来创建自己想要的阴影效果。通过使用正值和负值的组合，你可以在不同的方向上创建阴影。只要改变 box-shadow 属性的值，就可以轻松地在左侧、右侧和底部创建盒子阴影。

阅读更多：CSS 教程