在 CSS 中仅在底部设置框阴影

Subodh Poudel 2023年2月20日 2022年4月20日
在 CSS 中仅在底部设置框阴影

本文将介绍 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-radiusspread-radiuscolor 是可选的。

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

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

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

接下来,使用 box-shadow 属性设置各种选项。将 0 设置为 h-offset8px 设置 v-offset2px 设置 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;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn