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