在 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