其實對於box-shadow，老白我也是一知半解，之前用的時候直接複製已有的，也沒有仔細思考過box-shadow的數值分別對應什麼，最後導致陰影的邊如何自由控制，苦於懶人乙個一直沒有正式去學習，今天無意中看到以下這篇文章，瞬間清醒有木有，看完整片文章，對於box-shadow陰影四個邊的設定完全瞭如指掌了，再也不怕修改box-shadow了！
對於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; /*下邊陰影 黃色*/
外陰影加好了。
android中四個典型動畫設定
現總結android下四個基本動畫的方法 rotateanimation scaleanimation alphaanimation translateanimation 具體用法如下 1.animation rotateanimation new rotateanimation 90f,270f,...
eclipse設定tab鍵為四個空格
這是我的乙個親身經歷，我們有乙個開發人員開發了乙個專案，當專案快要交付之前，會有乙個 審查工作，而這個工作的第一步就是要看 的美觀程度還有命名規範，他把 發給我了，我問他 確定沒有問題了嗎 他非常肯定，於是我就換了乙個檔案的開啟方式。當時他就傻眼了，東一塊西一塊，亂七八糟和車禍現場一樣。造成這個的原...
事物的四個特性和四個隔離級別
事物是一條或者多條sql語句組成的執行序列，這個序列中的所有語句都屬於同乙個工作單元，要麼同時完成，其中如果有乙個失敗，則其他操作都要回滾。事物是乙個不可分割的資料庫邏輯工作單位，要麼全部完成，要不失敗回滾。事務執行的結果必須使資料庫從乙個一致性狀態變到另乙個一致性狀態。乙個事物的執行不能被別的併發...