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>

美化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. ASP.NET Core 视图 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 视图 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 视图 花了几章节,终于把 ASP.NET Core MVC 中的 C 控 ...

  2. svm资料收集

    向量点乘(内积)和叉乘(外积.向量积)概念及几何意义解读: https://blog.csdn.net/dcrmg/article/details/52416832 三角形余弦定理:https://z ...

  3. ThreadPool类(线程池)

    原文:ThreadPool类(线程池) CLR线程池并不会在CLR初始化时立即建立线程,而是在应用程序要创建线程来运行任务时,线程池才初始化一个线程.线程池初始化时是没有线程的,线程池里的线程的初始化 ...

  4. WPF 页面切换效果

    原文:WPF 页面切换效果 最近做一个有页面切换的吧.. 我觉得这个功能是比较基础的吧.. 在网上百度了一下.. 用NavigationWindow的比较好.. 因为Demo中是带了淡入淡出的页面效果 ...

  5. Emgu-WPF学习使用 - 颜色映射

    原文:Emgu-WPF学习使用 - 颜色映射 string sFile = ""; if (!String.IsNullOrEmpty(AppConstUtils.GDefault ...

  6. Token的设计(2)

    词法分析 Token的几个种类 前端的第一步就是词法分析, 这个过程通俗来讲就是将源代码转化为一串Tokens. 所以首先应该想到的是, 到底该有哪几种类型的Token ? 关于这个问题我已经想过了, ...

  7. WPF滚动条嵌套,响应鼠标滑轮事件的处理

    在C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果是鼠标滚动整个S ...

  8. 获取控件中应用的模版的内部的控件,使用LoadContent()方法获取模版跟节点

    treeview获取内部控件元素 Button btnAdd = ((tvks.HeaderTemplate as DataTemplate).LoadContent() as StackPanel) ...

  9. PySide——Python图形化界面入门教程(四)

    PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your Own Signals and Slots 翻译自:http://pythoncentral ...

  10. delphi 线程教学第一节:初识多线程(讲的比较浅显),还有三个例子

    http://www.cnblogs.com/lackey/p/6297115.html 几个例子: http://www.cnblogs.com/lackey/p/5371544.html