美化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>