很多時候，說起來box-shadow，那很多人第一個想法就是，那不就是做陰影的嗎？其實除了做陰影，還有很多很實用的效果的，今天我們就來說說box-shadow的各種應用吧！
CSS3
認識box-shadow的屬性
首先，要想很好的運用box-shadow，那就要先很好的認識理解box-shadow的各種屬性，我們來一步步的瞭解一下吧！
shadow pattern
預設為outset，即採用outer box-shadow。透過設定為inset時，則採用inner box-shadow。
horizontal offset
陰影距離原位置的水平位移，正數表示向右移動，負數表示向左移動。
vertical offset
陰影距離原位置的垂直位移，正數表示向下移動，負數表示向上移動。
blur radius
預設值為0，陰影模糊度半徑。
spread distance
預設值為0，擴充套件或縮小陰影的作用面積。
<color>
陰影顏色，預設與color屬性一致。
注意：我們可以同時設定多個陰影，而陰影的z-index值從左向右遞減。
瞭解清楚了這些屬性後，我們就開始講幾個比較好玩的效果應用吧！
什麼是outer box-shadow 和 inner box-shadow？
box-shadow預設情況下就是outer box-shadow，當我們在box-shadow中新增inset關鍵詞後，則採用inner box-shadow了，但到底它倆的效果是如何的呢？
內陰影和外陰影
程式碼展示
outer-box-shadow是怎麼實現的呢？
outer-box-shadow是一個預設效果來的，也就是我們常說的陰影。
特點：陰影落在元素的border box之外。
實現原理：
1。建立一個與元素border box尺寸一致的陰影盒子；
2。將陰影盒子定位到於元素border box重合，並位於元素之下；
3。根據horizontal offset和vertical offset來相對原位置作移動；
4。根據spread distance縮放陰影盒子的尺寸（會改變盒子的位移）；
5。根據blur radius對陰影盒子作加工；
6。最後將陰影盒子與元素border box重合部分剪下掉。
實際效果
實際程式碼
inner-box-shadow又是如何實現的呢？
在box-shadow中新增inset關鍵詞後，就是inner-box-shadow了。
特點：陰影落在元素的padding box之內。
實現原理（純個人理解）：
7。 建立一個與元素padding box尺寸一致的陰影盒子；
8。 將陰影盒子定位到於元素padding box重合，並位於元素之上；
9。 水平和垂直各畫兩條線，分別跟元素padding edge重合；（共4條分別記為left/top/right/bottom-guideline）
10。 根據horizontal offset和vertical offset移動left/top/right/bottom-guideline。
11。 根據spread distance移動4條線。spread distance為正數時，left-guideline向右移動，top-guideline向下移動，right-guideline向左移動和bottom-guidelien向上移動；spread distance為負數時，則相反。
12。 根據blur radius加工元素各padding edge至其對應的guideline間的區域。
13。 對陰影盒子進行剪裁
14。 剪下掉不與元素padding box重疊的部分；
15。 僅顯示元素各padding edge至其對應的guideline間的區域。
實際效果
實際程式碼
模糊邊框 by blur radius
W3C中沒有規定瀏覽器廠商使用哪種方式實現模糊效果，反正效果與高斯模糊效果差不多就是了。但有一點我們需要注意的，那就是
模糊效果會擴大陰影的面積
。
實際效果
實際程式碼
第一塊是blur radius為0的效果，可以看到陰影尺寸與元素尺寸一模一樣。而第二塊是blur radius為20px的效果，可以看到陰影尺寸有所擴充套件了，而第三塊則擴充套件得更多一些。
我們現在可以看到blur radius值大於0時會擴充套件陰影尺寸，那麼到底擴充套件多少呢？那我們要先明確模糊發生的起始位置了。
16。 對於outer-shadow-box而言，模糊發生的起始位置就是陰影盒子的各邊；
17。 對於inner-shadow-box而言，模糊發生的起始位置就是各guideline。
然後模糊效果是從發生的位置，對於水平方向的邊或guideline則向垂直方向發散，對於垂直方向的邊或guideline則向水平方向發散，且發散的距離相同。
發散的距離相同，因此每個方向各發散為blur radius/2的距離。看sample3中陰影尺寸已經與元素盒子重疊了，因為陰影盒子左邊框向左發散了20px了，超過它倆之間10px的水平距離了，而sample2則恰恰鄰近而已。
好了，今天就簡單分析兩個效果的實現，很簡單很實用的兩個方法。
