《CSS揭祕》：單側投影

單側投影能夠實現一種優雅而又真實的效果。

單側投影

box-shadow: 2px 3px 4px -4px rgba(0,0,0.5);
以上代碼能夠簡單理解爲：

1. 以該元素所在的位置和尺寸，畫一個rgba(0,0,0.5)的矩形

2. 把它向右移動2px，向下移動3px

3. 對它進行4px模糊算法。

4. 縮小投影的尺寸。

5. 模糊後的矩形和原始元素交集的部分被剔除
   若是第三個參數和第四個參數相反，咱們就看不到任何投影，除非用偏移量移動投影。如此咱們能夠簡單的建立單側投影

box-shadow: 0px 5px 4px -4px rgba(0,0,0.5);

鄰邊投影

鄰邊投影比較好解決
box-shadow: 5px 5px 4px rgba(0,0,0.5);

雙側投影

雙側投影沒有簡單的半分，惟一的方案是把單側投影運用兩次

box-shadow: 5px 0 5px -5px rgba(0,0,0.5),
           -5px 0 5px -5px rgba(0,0,0.5);