來自W3CSchool的解釋

語法：

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

注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

值描述

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

?

?

?

?

?

?

?

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個例子中，水平方向的陰影為10px，所以右側陰影一直有10px，而垂直方向陰影>0（正方向，下側有陰影），=0（垂直方向無陰影），<0（負方向，上側有陰影）。若垂直方向數值固定，水平方向變化也同理！

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

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

轉載于:https://www.cnblogs.com/chakson/p/4725107.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。