迹忆客 专注技术分享

本文将介绍 CSS 中仅将 box-shadow 设置到框的底部。

在 CSS 中使用 box-shadow 属性设置底部框阴影

我们可以使用 box-shadow 属性仅在盒子底部设置阴影。box-shadow 属性设置所选元素的阴影。

该物业有多种选择。首先，让我们从它的语法来理解这个属性，如下所示。

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

了解 box-shadow 属性如何实现它至关重要。h-offset 选项设置元素水平方向的阴影。

正值会将阴影设置为元素的右侧，而负值会将阴影设置为元素的左侧。

同样，v-offset 选项设置垂直阴影。同样，正值将阴影设置为底部，而负值将其设置为元素顶部。

blur-radius 选项表示阴影的模糊半径。随着模糊半径的增加，阴影变得更加模糊。

spread-radius 选项设置元素的阴影大小。正值增加阴影的大小，而负值减小。

我们还可以使用 color 选项来设置阴影的颜色。但是，选项 blur-radius、spread-radius 和 color 是可选的。

现在我们已经了解了 box-shadow 属性是如何工作的，是时候实现它来为盒子创建底部阴影了。

为此，我们可以将 h-offset 设置为 0 并为 v-offset 赋予一些值。结果，阴影将仅出现在框的底部。

例如，创建一个具有一定高度和宽度的盒子。将 background-color 属性设置为 black。

接下来，使用 box-shadow 属性设置各种选项。将 0 设置为 h-offset，8px 设置 v-offset，2px 设置 blur-radius，-2px 设置 spread-radius，将 color 设置为 gray .

结果，我们得到了一个底部带有灰色阴影的黑盒子。因此，我们学习了如何使用 box-shadow 属性在 CSS 中将阴影设置为盒子的底部。

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

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}