對於div邊框的陰影一直沒有很好地理解，也一直不明白怎么給四個邊框分別設置陰影。昨天項目中碰到了這個問題，就認真想了一下，在此總結一二。
首先，還是從官方解釋說起。
網上的解釋通常都是什么水平陰影長度、垂直陰影長度，略抽象。根據我的實驗和理解，從坐標層面來理解比較直觀，那么我們首先建立如下直角坐標系：（突然發現我的電腦上竟然沒有裝Visio，現學現賣用PS臨時畫了一個，原諒我）
OK。原點為基點，原點左側為x軸負方向，值為負，右側為正；原點下方為y軸正方向，值為正，上方為負。如上圖箭頭所指。好理解嗎？不要嫌我啰嗦，正確理解坐標方向對於理解陰影畫法至關重要。
好了，上代碼。官方用語： box-shadow:1px 2px 3px 4px #ccc inset；
來分別看一下以上六個值的含義： 1px 從原點開始，沿x軸正方向的長度（倘若為負值，為沿x軸負方向的長度）；
2px 從原點開始，沿y軸正方向的長度；（倘若為負值，為沿y軸負方向的長度）；
3px 陰影的模糊度，只允許為正值；
4px 陰影擴展半徑；
#ccc 陰影顏色；
inset 設置為內陰影（如果不寫這個值，默認為外陰影）；
我們再詳細點說，所謂內外陰影，其實就是指的是陰影在div的外面一圈還是在div的里面一圈，如下圖：
外陰影 
內陰影
鋪墊完畢，說正事——給四條邊分別加陰影。
如果打算添加外部陰影，那么在div內部是不會顯示陰影的。看起來好像是廢話，來仔細分析一下。
將div放在直角坐標系中，則div上邊與x軸重合，左邊與y軸重合，沒錯吧。所以，對於上面一條邊，沿y軸正方向的陰影不會顯示，因為沿y軸正方向的長度已經進入到了div內部。同樣的，對於左側邊框，沿x軸正方向的長度也進入到了div內部，陰影不會顯示。
對於右側邊框，則沿x軸負方向的長度不顯示（不要糾結於原點位置，只考慮坐標方向。可以看做右邊與y軸重合，方便理解）；對於下方邊框（看做下邊與x軸重合），沿y軸負方向的長度進入div內部，不顯示。
好吧，我的語言組織能力有待加強。將以下代碼配上這一段的文字描述，就不難理解了。
1 /*說明：（以上部邊為例進行說明） 2 1. 對於上邊，沿x軸方向的偏移量顯然沒有意義，設為0px； 3 2. 沿y軸正方向陰影進入div內部，不顯示，因此寫為負數； 4 3. 擴展半徑不要寫，或者寫成0px，這樣就不會影響其他的邊； 5 4. 顏色自定； 6 5. 模糊程度按需要自定； 7 6. 下、左、右邊陰影按規律類推。 8 */ 9 box-shadow: 0px -10px 0px 0px #ff0000, /*上邊陰影 紅色*/ 10 -10px 0px 0px 0px #3bee17, /*左邊陰影 綠色*/ 11 10px 0px 0px 0px #2279ee, /*右邊陰影 藍色*/ 12 0px 10px 0px 0px #eede15; /*下邊陰影 黃色*/
效果圖：
外陰影加好了。倘若是內陰影，可以按這個規律自己推一下。