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

转载于:https://www.cnblogs.com/QuixoteY/p/10902147.html