box-shadow 是 CSS 屬性，用于為元素添加一個(gè)陰影效果，使元素看起來(lái)浮起或有層次感。
該屬性允許設(shè)置一個(gè)或多個(gè)陰影效果，其語(yǔ)法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow：水平陰影的位置。可以使用負(fù)值表示陰影在元素左側(cè)，正值表示陰影在元素右側(cè)，0 表示沒(méi)有水平陰影。 -
v-shadow：垂直陰影的位置。可以使用負(fù)值表示陰影在元素上方，正值表示陰影在元素下方，0 表示沒(méi)有垂直陰影。 -
blur：模糊半徑?？蛇x值，表示陰影的模糊程度。值越大，陰影越模糊，0 表示沒(méi)有模糊。 -
spread：陰影的擴(kuò)展半徑。可選值，表示陰影的大小擴(kuò)展。正值表示陰影擴(kuò)展，負(fù)值表示陰影收縮。 -
color：陰影的顏色?？蛇x值，表示陰影的顏色，可以是 CSS 顏色值（如#rrggbb、rgba()、hsl()等）。 -
inset：可選值，用于設(shè)置是否為內(nèi)陰影。如果存在inset，則表示是內(nèi)陰影，否則為外陰影。內(nèi)陰影會(huì)出現(xiàn)在元素內(nèi)部，外陰影則出現(xiàn)在元素外部。
例如，以下是一個(gè)示例，展示如何應(yīng)用 box-shadow 屬性：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-606790.html
div {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 4px 4px 10px #888888;
}
在上述示例中，box-shadow: 4px 4px 10px #888888; 的樣式為 <div> 元素添加了一個(gè)外陰影效果。水平位置為 4px，垂直位置為 4px，模糊半徑為 10px，顏色為 #888888。這樣 <div> 元素將有一個(gè)看起來(lái)浮起的效果，有了層次感。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-606790.html
到了這里，關(guān)于【CSS】box-shadow 屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開(kāi)發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
