box-shadow這個屬性，大多時候自己都是用到纔會去百度下其使用方式。因爲這個屬性有語法，通常項目中如果不是要多炫酷的效果，都是以下的語法是最常用的了。具體其他語法可以看這裏box-shadow
.box-shadow{
box-shadow: 1px 0px 0px red;
}
box-shadow有5個屬性值offset-x、offset-y、blur-radius、spread-radius、color
前兩個值很好理解，但後面兩個值你能準確說出他們之間的區別嗎？
本文主要就是對這兩個屬性值作詳細的理解。
blur-radius：模糊距離，很多文章中說到這個屬性值的時候都是說可以理解爲模糊度來使用，值越大，就越模糊（一開始我也這麼理解的，實際上這個理解過程中對模糊距離的定義模糊化了）
spread-radius：陰影大小（這個的定義很明確）
促使我去深入理解這個屬性是因爲我在使用的過程中有那麼一刻，遇到了這個問題。然後就一直想這是爲什麼呢？
問題就是：在設置陰影右偏移時明顯看到了，陰影往右邊冒出來了。那爲什麼我在增加了個模糊度的時候，div的上下卻也有了陰影呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陰影右偏移</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 0px 0px #333;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陰影右偏移，並模糊了</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 0px 5px #333;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖：
解答的關鍵在於兩點：
1.所謂陰影，就是本體的複製（某篇文章中看到了這句話，使我印象深刻）
2.模糊距離的定義（即模糊的過程理解）
先來講講第一點：陰影是本體的複製。
對於陰影可以理解爲是本體的複製層，並於本體層疊加在一起了。
個人覺得這樣的三維角度就可以很好的理解了陰影與本體的關係了。所以有時候本體設置了border-radius，陰影自然也就跟着有了圓角。然後所謂的偏移也就是陰影在本體的位置上的偏移。如果沒有任何偏移實際上黑色層和黃色層是疊加在一起的。
也就是這樣 box-shadow: 0px 0px 0px #333; 你是完全看不到陰影的。
模糊距離的理解
這個就要去理解圖片中的模糊距離是怎樣定義的。在高斯模糊這篇文章中恰恰解答了我的疑問。看懂了高斯模糊的大致原理，那就理解了，爲什麼效果圖二的代碼，div的上下卻也有了陰影。而且
這裏做一下補充：
當給blur-radius設置了值，無論是1px還是多少px時，陰影就會將整個圖片用高斯模糊差不多的方式來進行模糊化。文章中用的是九宮格來作例子，而再想深入一層就是說，不一定是九宮格的範圍來模糊中間點吧，可以是以中間點爲圓心，模糊距離爲半徑這樣的範圍來加權平均是不是？那當處理到這個陰影邊緣的時候，邊緣點是不是也就同樣被這樣的範圍模糊了。而這時候的模糊化不是到陰影邊緣就結束了的，這個模糊化需要將陰影邊緣以及周邊的色塊平滑模糊至底色。
在MDN開發文檔中關於blur-radius就有這麼一段描述
…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
範圍從陰影內半徑端點的完整陰影顏色到陰影外端點的完全透明。
所以可以理解爲模糊化了的陰影實際面積會比本體要稍大些。那也就看到了圖二這樣的效果。而且在盒子的四角可以看到其模糊程度是會比盒子邊緣的模糊程度更大些。是因爲這個四角的陰影色塊只佔了模糊範圍的四分之一，而長和寬的邊緣上是陰影色塊是佔模糊範圍的二分之一。
所以網上有的文章上說“模糊距離出來是個圓的效果”，個人認爲並不是的。
那麼接下來一個思考就是：如何設置才能看到只有右側模糊的陰影呢？
網上一搜，那就是增加設置spread-radius的值，並且設置爲負值。 box-shadow: 10px 0px 5px #333;
spread-radius：陰影大小。
其實這個值十分的好理解，就是陰影的放大和縮小。設置1px，那就是陰影會往四周擴展1px。
像這樣的 box-shadow: 0px 0px 0px 1px #333;
得到的效果就是給盒子加了個1px的邊框。
而如果是設置-1px;那就是四周收縮1px;那這樣怎樣才能看到效果來驗證呢？將x，y偏移，挪到你能看到個完整的陰影。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陰影完全偏移出來</title>
<style>
div
{
width:100px;
height:100px;
background-color:yellow;
box-shadow: 0px 100px 0px -10px #333;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
這樣就可以明顯看到陰影比本體縮小了。
現在對blur-radius和spread-radius的區別應該就很清楚了。以及兩個值哪個不可以負值哪個可以有負值，也瞭然在心了。如果還不清楚，那肯定是沒明白上面說的內容了。（結論：blur-radius不爲負值；spread-radius正負可取）
在來討論下inset這個屬性值
上面的設置都是外陰影的，而inset內陰影，實際就是大小延伸的方向反過來了。可以結合鏤空來理解這個內陰影。
因爲內陰影實際也是一個陰影層，但它是鏤空的。如下圖，綠色鏤空層實際上應該是這一個平面除了鏤空部分，其餘部分都是綠色的，而鏤空部分實際就是本體的面積，但這樣的效果不好畫出來。
假設div寬高100px;
box-shadow: inset 0px 0px green; //看不到任何陰影
box-shadow: inset 100px 0px green;//div全是綠色了
box-shadow: inset 0px 100px green;//div全是綠色了
同樣的因爲上面說過spread-radius正負可取。
spread-radius爲正值，鏤空面積收縮10px
那如果是內陰影spread取負值會是什麼情況呢，那就是鏤空的部分增大了，也就是陰影中的本體面積增大了。但因爲這些層疊起來最終能看到的是本體面積的範圍。可以通過x、y偏移來驗證。
box-shadow: inset 0px 0px 0px -10px green; //鏤空面積四周擴展了10px
box-shadow: inset 0px 10px 0px -10px green; //可以上下左右偏移看到效果
再來看看blur-radius
設置： box-shadow: inset 0px 0px 1px 0px green;
視覺上看到div有了border，當你把這個值增大就可以明顯的看到它的模糊化了。
當你將這個值設置到相對大一點，比如50px時，整個div應該就會大約一半的面積被綠色模糊化，這是注意剩餘黃色的四角依然會是圓角的效果。上面說到的高斯模糊那部分的原理一致。
blur-radius該值再設置大一點比如100px時，應該就是將整個div被綠色模糊化了，而當你再設置個spread-radius爲負值時，可以看到這個div的綠色變淺了
box-shadow: inset 0px 0px 100px 0px green;//綠色模糊化了整個div
box-shadow: inset 0px 0px 100px -10px green;//中間保留了部分黃色
這是爲什麼，小夥伴們知道嗎？
如果前面的都理解了，那你一定知道爲什麼的。