CSS 盒子阴影（只有底部）

在本文中，我们将介绍如何使用CSS来为元素添加底部阴影。

阅读更多：CSS 教程

什么是盒子阴影？

盒子阴影是为HTML元素添加的一种特效，用于营造立体感和深度效果。通过给元素添加阴影，可以使其从背景中凸显出来，增加页面的可视性。

CSS 盒子阴影属性

在CSS中，我们可以使用box-shadow属性来设置元素的盒子阴影。该属性的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

通过设置不同的值，我们可以调整盒子阴影的效果。下面是各个值的说明：

• h-shadow：表示水平阴影的位置。可以接受正值（向右偏移）或负值（向左偏移）。
• v-shadow：表示垂直阴影的位置。可以接受正值（向下偏移）或负值（向上偏移）。
• blur：表示阴影的模糊程度。可以接受正值（增加模糊程度）或零（无模糊效果）。
• spread：表示阴影的扩展尺寸。可以接受正值（扩大阴影范围）或负值（缩小阴影范围）。
• color：表示阴影的颜色。可以使用CSS颜色值或关键词。
• inset：可选项，表示阴影是否为内阴影。如果设置为inset，则内阴影生效。

底部阴影示例

现在，让我们来看一个示例，通过CSS为一个块元素添加底部阴影。

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0px 5px 5px #888888;
}

上述示例中，我们创建了一个宽高为200px的块元素，并为其设置了背景颜色为#f0f0f0。通过box-shadow属性，我们将阴影位置设置为0px（水平偏移）和5px（垂直偏移），模糊程度为5px，颜色为#888888。

可以在浏览器中运行上述代码，查看效果。

底部阴影只有一半

除了默认的均匀分布阴影之外，我们还可以通过设置spread属性来控制阴影的形状。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0px 5px 5px -2px #888888;
}

在上述示例中，我们将spread值设置为-2px，表示缩小阴影的范围。这样，阴影将只在底部的一半范围内可见。

不同角度的底部阴影

除了水平和垂直方向的阴影之外，我们还可以通过改变h-shadow和v-shadow值来调整阴影的角度。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 2px 2px 5px #888888;
}

在上述示例中，我们将h-shadow和v-shadow值都设置为2px，表示阴影向右下角偏移，模糊程度为5px。这样，阴影将在底部右边的角落形成一条斜线。

底部内阴影

除了普通的阴影之外，我们还可以通过设置inset属性来创建底部内阴影。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0px -5px 5px #888888 inset;
}

在上述示例中，我们在box-shadow属性的末尾添加了inset关键词，表示创建内阴影。这样，阴影将出现在元素内部的底部，而不是外部。

总结

本文介绍了如何使用CSS为元素添加底部阴影。通过调整box-shadow属性的各个值，我们可以创建不同形状、不同样式的阴影效果。无论是普通的阴影还是内阴影，都可以通过CSS轻松实现。