div四個邊框分別設置陰影樣式

      對於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. 對於上邊，沿x軸方向的偏移量顯然沒有意義，設爲0px；
2. 沿y軸正方向陰影進入div內部，不顯示，所以寫爲負數；
3. 擴展半徑不要寫，或者寫成0px，這樣就不會影響其餘的邊；
4. 顏色自定；
5. 模糊程度按須要自定；
6. 下、左、右邊陰影按規律類推。
*/
 box-shadow:    0px -10px 0px 0px #ff0000,   /*上邊陰影  紅色*/
                -10px 0px 0px 0px #3bee17,   /*左邊陰影  綠色*/
                10px 0px 0px 0px #2279ee,    /*右邊陰影  藍色*/
                0px 10px 0px 0px #eede15;    /*下邊陰影  黃色*/

效果圖：

                    

 

外陰影加好了。假若是內陰影，能夠按這個規律本身推一下。

 

      試驗中發現了一個問題：

      對於上下邊，至關乾淨漂亮。可是寫左邊的陰影時，上邊會有一條細細的陰影；寫右邊陰影時，下邊會有一條細細的陰影。不懂爲何。

      期待大神解答。或者先放着吧，等我成爲大神了再來解答。