美化Div的邊框

CSS修飾Div邊框

---

大部分時候，Div的邊框真的作的太醜了，若是不用不少樣式來修飾的話，它永遠都是那麼的突兀。做爲一個後端開發，前端菜雞，在沒有設計和前端開發本身獨自作項目的時候經常會遇到Div邊框過於醜陋致使界面看上去很不美觀的狀況，總結了三大法寶來應對它

整齊就是美

在沒有設計參與的狀況下，儘可能把頁面作的整潔明瞭，若是沒有明確的要求，就用淺色調，在各Div對齊有序狀況下不會很難看。

設計風格統一

當你肯定使用一個色調之後就把全部的邊框顏色，背景顏色都往這個顏色靠近（注意不能太過類似，須要有區分度，但是又不能帶來太大的視覺衝擊），這樣設計出來的網頁較爲簡潔，設計上不會太醜

使用CSS來美化Div的邊框

先來寫一個美化邊框的CSS代碼：

border:1px solid #96c2f1;background:#eff7ff

將這段CSS代碼應用在Div上，產生邊框效果，代碼以下：

<div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff">&nbsp;border:1px solid #96c2f1;background:#eff7ff</div>

生效後效果以下：

 border:1px solid #96c2f1;background:#eff7ff

下面再節選幾個已經美化好的Div邊框樣式，可根據本身的網頁風格選擇使用：

 border:1px solid #96c2f1;background:#f0fbeb>

 border:1px solid #96c2f1;background:#eefaff>

 border:1px solid #cceff5;background:#fafcfd>

 border:1px solid #ffcc00;background:#fffff7>