CSS修饰Div边框

大部分时候，Div的边框真的做的太丑了，如果不用很多样式来修饰的话，它永远都是那么的突兀。作为一个后端开发，前端菜鸡，在没有设计和前端开发自己独自做项目的时候常常会遇到Div边框过于丑陋导致界面看上去很不美观的情况，总结了三大法宝来应对它

整齐就是美

在没有设计参与的情况下，尽量把页面做的整洁明了，如果没有明确的要求，就用浅色调，在各Div对齐有序情况下不会很难看。

设计风格统一

当你确定使用一个色调以后就把所有的边框颜色，背景颜色都往这个颜色靠近（注意不能太过相似，需要有区分度，可是又不能带来太大的视觉冲击），这样设计出来的网页较为简洁，设计上不会太丑

使用CSS来美化Div的边框

先来写一个美化边框的CSS代码：

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

将这段CSS代码应用在Div上，产生边框效果，代码如下：

  1. <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>

美化Div的边框的更多相关文章

  1. css美化Div边框的样式实例*（转载）

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  2. div + css 边框 虚线

    div + css 边框 虚线 dotted:[点线|有点的|点线式边框|点虚线] .introduce { border:1px dotted gray; margin:8px 5px 8px 10 ...

  3. css美化Div边框的样式实例

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  4. div加边框

    一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...

  5. css实现div多边框_box-shadow模拟多边框、outline描边实现

    在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果,每组参数值用逗号隔开.如果把box-shadow特性的两个偏移量 h-shadow .v-shado ...

  6. 当div有边框图片的时候，怎么实现内部的p标签的水平和垂直居中

    <!-- 这里a.png必须是四边的框都有,限制,这个时候做里边文字的居中,首先在这个里边在套一个div悬浮(absolute或者float:left),然后在这个div(必须设宽高和margi ...

  7. 文字超出DIV的边框

    已经给div设置了高宽,但是文字还是会戳出div而不是换行 鼓捣了一下好像是因为这个原因 如果全是 aaaaaaaaaaaaaaaaaaaaa 这样的纯英文,那么测试的时候是不会换行的,因为浏览器认为 ...

  8. css div 细边框

    .item{ max-width:48%; float:left; padding:2px; border-top:1px solid #000; border-left:1px solid #000 ...

  9. html div 加边框样式

    边框虚线样式:dashed边框实现样式:solid border:1px dashed #000代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #000代表设置对象边框宽度 ...

随机推荐

  1. Python抓取小说

    Python抓取小说 前言 这个脚本命令MAC在抓取小说写,使用Python它有几个码. 代码 # coding=utf-8 import re import urllib2 import chard ...

  2. html5 页面元素插件

    1. 滚动条 jquery.nicescroll 正常引用方式: 设置区域高度 var bodyHeight = $(document.body).height(); $("#XXXXXXX ...

  3. MVVM 下 ContextMenu的命令绑定

    原文:MVVM 下 ContextMenu的命令绑定 由于ContextMenu不继承父级的DataContext,所以如果要绑定父级的DataContext,直接DataContext=" ...

  4. Win8 Metro(C#)数字图像处理--2.75灰度图像的形态学算法

    原文:Win8 Metro(C#)数字图像处理--2.75灰度图像的形态学算法 前面章节中介绍了二值图像的形态学算法,这里讲一下灰度图的形态学算法,主要是公式,代码略. 1,膨胀算法 2,腐蚀算法 3 ...

  5. Socket小白篇-附加TCP/UDP简介

    Socket小白篇-附加TCP/UDP简介 Socket 网络通信的要素 TCP和UDP Socket的通信流程图 1.Socket 什么是Socket Socket:又称作是套接字,网络上的两个程序 ...

  6. Win8Metro(C#)数字图像处理--2.13Roberts边缘检测

    原文:Win8Metro(C#)数字图像处理--2.13Roberts边缘检测  [函数名称] 图像Roberts边缘检测函数RobertEdgeProcess(WriteableBitmap s ...

  7. SQLServer2005数据库快照的简单使用

    原文:SQLServer2005数据库快照的简单使用                                                  SQLServer2005数据库快照的简单使用 ...

  8. create table as 复制not null

    创建一张表包含非空约束,唯一约束和check约束 SQL> create table dept( 2 ename varchar2(20) constraint mep_ename_nn not ...

  9. asp.net ToString() 格式化字符串

    c# ToString() 格式化字符串  格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...

  10. windows和linux双系统，重新分区后修复grub

    我电脑里装的是 windows 7 profressional 和 fedora 12 ,本来给 C 盘分了 50G ,原本以为够了,结果50G 瞬间用完,于是乎开始重新分区. PQ 是不能用了,上网 ...