在 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-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;
}
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