先看一個例子
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
(1) 以該元素相同的尺寸1和位置，畫一個rgba(0,0,0,.5) 的矩形。（之後稱這個矩形爲盒子）
(2) 把它向右移2px，向下移3px。
(3) 使用高斯模糊算法（或類似算法）將它進行4px 的模糊處理。這在
本質上表示在陰影邊緣發生陰影色和純透明色之間的顏色過渡長度近似於模
糊半徑的兩倍（比如在這裏是8px）。
(4) 接下來，模糊後的矩形與原始元素的交集部分會被切除掉，因此它
看起來像是在該元素的“後面”。實際上沒有任何投影繪製在元素的下層。
box-shadow: offset-x offset-y blur spread color inset;
參數解釋：
offset-x：必需，取值正負都可。offset-x水平陰影的位置。
offset-y：必需，取值正負都可。offset-y垂直陰影的位置。
Blur（模糊半徑）:可選，只能取正值。blur-radius陰影模糊半徑，0即無模糊效果，值越大陰影邊緣越模糊。
Spread（擴張半徑）：可選，取值正負都可。spread代表陰影的周長向四周擴展的尺寸，正值，陰影擴大，負值陰影縮小。
color:可選。陰影的顏色。如果不設置，瀏覽器會取默認顏色，通常是黑色，但各瀏覽器默認顏色有差異，建議不要省略。
inset:可選。將外部投影(默認outset)改爲內部投影。inset 陰影在背景之上，內容之下。
模糊半徑與擴張半徑的區別
擴張半徑會根據你指定的值去擴大或（當指定負值時）縮小投影的尺寸，通俗點講就是增大（縮小）盒子大小。
幾種投影實現
單側投影
box-shadow: 0 5px 4px -4px black;
應用一個負的擴張半徑，值剛好等於模糊半徑，那麼投影的尺寸就會與投影所屬元素的尺寸完全一致，形成單側投影
鄰邊投影
box-shadow: 3px 3px 6px -3px black;
這和舉例中的投影有什麼區別：舉例中陰影由兩部分組成1、偏移產生的盒子 2、陰影
此投影只由陰影組成。如果偏移值增大舉例中投影就會非常難看。
鄰邊投影實現：
應用一個負的擴張半徑，值剛好等於模糊半徑一半
水平垂直偏移量小於模糊半徑一半以保證盒子被‘藏起來’
雙側投影
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
實現方式是使用兩個單側投影