在 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