CSS修飾Div邊框

---

大部分時(shí)候，Div的邊框真的做的太丑了，如果不用很多樣式來修飾的話，它永遠(yuǎn)都是那么的突兀。作為一個(gè)后端開發(fā)，前端菜雞，在沒有設(shè)計(jì)和前端開發(fā)自己獨(dú)自做項(xiàng)目的時(shí)候常常會(huì)遇到Div邊框過于丑陋導(dǎo)致界面看上去很不美觀的情況，總結(jié)了三大法寶來應(yīng)對它

整齊就是美

在沒有設(shè)計(jì)參與的情況下，盡量把頁面做的整潔明了，如果沒有明確的要求，就用淺色調(diào)，在各Div對齊有序情況下不會(huì)很難看。

設(shè)計(jì)風(fēng)格統(tǒng)一

當(dāng)你確定使用一個(gè)色調(diào)以后就把所有的邊框顏色，背景顏色都往這個(gè)顏色靠近（注意不能太過相似，需要有區(qū)分度，可是又不能帶來太大的視覺沖擊），這樣設(shè)計(jì)出來的網(wǎng)頁較為簡潔，設(shè)計(jì)上不會(huì)太丑

使用CSS來美化Div的邊框

先來寫一個(gè)美化邊框的CSS代碼：

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

將這段CSS代碼應(yīng)用在Div上，產(chǎn)生邊框效果，代碼如下：

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

生效后效果如下：

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

下面再節(jié)選幾個(gè)已經(jīng)美化好的Div邊框樣式，可根據(jù)自己的網(wǎng)頁風(fēng)格選擇使用：

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

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/QuixoteY/p/10902147.html

總結(jié)

以上是生活随笔為你收集整理的美化Div的边框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。