來(lái)自W3CSchool的解釋

語(yǔ)法：

?box-shadow: h-shadow v-shadow blur spread color inset;?

注釋：box-shadow 向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來(lái)規(guī)定。省略長(zhǎng)度的值是 0。

值描述

h-shadow	必需。水平陰影的位置。允許負(fù)值。
v-shadow	必需。垂直陰影的位置。允許負(fù)值。
blur	可選。模糊距離。
spread	可選。陰影的尺寸。
color	可選。陰影的顏色。請(qǐng)參閱 CSS 顏色值。
inset	可選。將外部陰影 (outset) 改為內(nèi)部陰影。

?

?

?

?

?

?

?

example

1、?box-shadow:10px 10px black;?

2、?box-shadow:10px -10px black;?

3、?box-shadow:10px 0px black;?

4、?box-shadow:0px 0px 10px 10px black;?

Tip：右下陰影為正方向，前3個(gè)例子中，水平方向的陰影為10px，所以右側(cè)陰影一直有10px，而垂直方向陰影>0（正方向，下側(cè)有陰影），=0（垂直方向無(wú)陰影），<0（負(fù)方向，上側(cè)有陰影）。若垂直方向數(shù)值固定，水平方向變化也同理！

要想四邊都有陰影，水平垂直陰影大小設(shè)置為0，然后設(shè)置模糊距離和陰影尺寸！

水平陰影和垂直陰影是必須要的，不可缺少！

轉(zhuǎn)載于:https://www.cnblogs.com/chakson/p/4725107.html

總結(jié)

以上是生活随笔為你收集整理的CSS3盒子阴影box-shadow的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。