詳解box-shadow
今天我們來探究一下“陰影”。
這個陰影可不是什麼心理陰影。我們探究的陰影是圖形學中的陰影。同學們可以先想想，在圖片中有了陰影，或者使用了陰影之後，為我們的影象提供了哪些特殊的效果？在高中大家在學習美術的時候，那個時候接觸素描，去畫一個杯子，或者畫一個球體，這個時候往往出現，老師畫的很逼真，立體感、層次感很強，自己雖說畫出來了，在不刻意強調的前提下容易讓人們誤會（滑稽臉）。
經過老師的講解，我們知道想讓我們所畫的物體，具有立體感，通常有：高光，暗面，灰面，投影（陰影），這幾部分組成。說完了圖形中的陰影后，來想想如何在我們的頁面中繪畫出陰影。這就涉及到我們今天要說的內容CSS3中的box-shadow。
探究box-shadow
在先說box-shadow之前，大家先來看看幾張圖片，具體細緻的感受一下box-shadow陰影。
一張很像紙的紙（廢話），有點陰影。
What？這也是陰影？（不要拿border來騙我好吧。。。）
這個也用box-shadow畫出來的？
上面的這些圖片確實是透過box-shadow畫出來的，同學們可能有些小震驚（圖一很微妙，圖三很炫酷，圖二有點開玩笑）。接下來我們來正式探究box-shadow的神奇黑魔法！！！！。
box-shadow直譯被稱為“盒子陰影”，直譯的結果與同學們的認知是相符的。CSS中存在盒模型，針對於盒模型的陰影唄。這點大家要記住，是針對於盒子（元素）的陰影，後面我們還會著重說明。
box-shadow屬性值由6部分組成。
語法形式：
box-shadow： offset-x offset-y blur spread color position；
這裡的position可以寫在最前面。也可以像上面一樣寫在最後面。
接下來我們來看看這幾個屬性都提供了什麼樣的功能？
1。offset-x offset-y
offset-x用於宣告陰影的水平偏移，就是陰影在X軸上的位置。當值為正數，陰影就位於元素右側，若值為負數，陰影位於元素的左側。
同理
offset-y用於宣告陰影的垂直偏移，就是陰影在Y軸上的位置。當值為正數，陰影就位於元素下側，若值為負數，陰影位於元素的上側。
例子：
CSS：
。demo{
width：100px；
height：100px；
background：#fcc；
box-shadow： 10px10px；
}
結果：
透過這個我們能看出來是具有陰影的，根據上面的講解能看出來是（10px10px）向下向右偏移10個px，同理負值是向上向左偏移。接下來我們看blur
2。blur
blur表示陰影的模糊半徑。效果與設計軟體中使用的高斯模糊濾鏡一樣。值為0意味著陰影完全不模糊。blur值越大，邊角越不鋒利，陰影越朦朧。不允許負值，負值等同於0。在我們上面的例子中修改：
CSS：
box-shadow： 10px10px10px；
結果：
我們能看到陰影虛化了。
這裡要注意的是：W3C中沒有規定瀏覽器廠商使用哪種方式實現模糊效果，反正效果與高斯模糊效果差不多就是了。但有一點我們需要注意的，那就是模糊效果會擴大陰影的面積。
Demo0是blur半徑為0的效果，可以看到陰影尺寸與元素尺寸一模一樣。而demo1是blur半徑為10px的效果，可以看到陰影尺寸有所擴充套件了，而demo2則擴充套件得更多一些。
現在我們感性上認知到blur半徑值大於0時會擴充套件陰影尺寸，那麼到底擴充套件多少呢？那我們要先明確模糊發生的起始位置了。經過肉眼觀察，模糊發生的起始位置就是陰影盒子的各邊。事實也就是這樣。至於發散距離blurradius（虛化半徑）/ 2的距離。看的demo2中陰影尺寸已經與元素盒子重疊了，因為陰影盒子左邊框向左發散了15px了，超過它倆之間10px的水平距離了。
3。spread
spread表示陰影的大小。當值為正數，陰影會向四周擴充套件。若值為負數，陰影會收縮，小於元素尺寸。預設值0會保持陰影和元素尺寸一致。
box-shadow： 0px0px0px10px；
在這裡面我們能看到，當我們spread為10px，margin也為10px他倆是重合的，說明spread為正值，在原來的大小上（上下左右）+spread的值。當spread為為負值，再遠的大小上– spread的值
4。color
color表示陰影的顏色。可以是任何顏色單位。這個沒什麼說的。
5。position
position表示陰影的位置，可選項。預設為外部陰影。可以透過使用inset關鍵字來製作內部陰影。外部陰影不用宣告預設就是，想使用內部陰影需要宣告inset在最前面最後都可以。
Likethis：
box-shadow： inset0px0px0px10px#0ff；
效果：
很明顯陰影是在裡面的。
接下來我們也對內陰影分析一下spread以及blurradius 。
透過上面的圖我們能看出來。
對於spread當值為正值時，可以看出內陰影從邊界開始填充。至於這個邊界是從border開始，還是從padding開始呢？
CSS：
border：10pxsolid#f0f；
padding：10px；
box-shadow： inset0px0px0px10px#0ff；
我們可以看出來
以Padding區域為起點進行向內部擴充套件陰影。擴充套件半徑為spread的值，負值沒有意義，沒有padding區域以content區域開始。
對於blurradius和spread類似這裡就不演示了，給大家總結一下，模糊半徑的值還是blurradius/2 開始位置同spread，有padding先從padding開始，沒有從content開始。
下面說一說box-shadow的層次（z-index）
對於
外陰影（預設情況）：
對於外陰影：高與magin低於background。
對於內陰影：高與padding低於content。
Box-shadow不僅可以區分內外陰影還可以，應用多個陰影進行疊加。
每個陰影用‘，’隔開，likethis
CSS：
width：100px；
height：100px；
background：#fcc；
padding：10px；
border-radius：50%；
box-shadow：120px0px0-10px#f0f，
95px10px00px#d00，
30px20px0-10px#cdd，
90px-10px00px#add，
40px-30px00px#edd；
結果：
層次也是後寫的在後邊。因為可以重疊所以我們可以寫多邊框的一個元素
這樣的一個準靶。（這個也就是剛開始出現的那張圖片的原因）。
