box-shadow 屬性詳解

　　　　　　1. 語法

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

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

　　　　　　　2.  詳解

　　　　　　　　　　　　前兩個值和inset很好理解，就是x，y軸的平移距離 和是否是內陰影，

　　　　　　　　　　我們先跳過第三個值 先看看第四個值spread

　　　　　　　　　　

 .box1 {
            width: 200px;
            height: 100px;
            box-shadow: 0px 0px 0px 30px red;           
        }

 

 

 

 以上  我們可以看出 spread  值 可以當作 將原來的box width 左右和height  上下  都加上了一個spread；放在box的底下 

box的實際位置 取決於前兩個值；

 

 現在我們來看看第三個值 blur

從上圖 我們可以看出blur 值  又在原來陰影的基礎上 上下左右各加上了blur的值

同時陰影也模糊了少許，隨之blur的值不斷增大，陰影也就越來越模糊，

我這里的理解就是： 舉個列子

假如我們用紅色的顏料刷牆，但是刷了spread面積的時候用完了，剩下的blur部分，我們趁着spread油漆沒干

用沒干的油漆刷blur的部分，這樣就造成spread會越來越模糊。

我是這么理解的 歡迎大佬批評指教

具體blur spread　之間的變化函數，我也不知道