美化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"> border:1px solid #96c2f1;background:#eff7ff</div>
生效后效果如下：
下面再节选几个已经美化好的Div边框样式，可根据自己的网页风格选择使用：
美化Div的边框的更多相关文章
- css美化Div边框的样式实例*（转载）
css美化Div边框的样式实例 很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...
- div + css 边框 虚线
div + css 边框 虚线 dotted:[点线|有点的|点线式边框|点虚线] .introduce { border:1px dotted gray; margin:8px 5px 8px 10 ...
- css美化Div边框的样式实例
很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...
- div加边框
一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...
- css实现div多边框_box-shadow模拟多边框、outline描边实现
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果,每组参数值用逗号隔开.如果把box-shadow特性的两个偏移量 h-shadow .v-shado ...
- 当div有边框图片的时候，怎么实现内部的p标签的水平和垂直居中
<!-- 这里a.png必须是四边的框都有,限制,这个时候做里边文字的居中,首先在这个里边在套一个div悬浮(absolute或者float:left),然后在这个div(必须设宽高和margi ...
- 文字超出DIV的边框
已经给div设置了高宽,但是文字还是会戳出div而不是换行 鼓捣了一下好像是因为这个原因 如果全是 aaaaaaaaaaaaaaaaaaaaa 这样的纯英文,那么测试的时候是不会换行的,因为浏览器认为 ...
- css div 细边框
.item{ max-width:48%; float:left; padding:2px; border-top:1px solid #000; border-left:1px solid #000 ...
- html div 加边框样式
边框虚线样式:dashed边框实现样式:solid border:1px dashed #000代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #000代表设置对象边框宽度 ...
随机推荐
- java程序设计第二课
抽象基类和接口 能够使用keywordabstact来创建抽象类,该抽象类不能被实例化 也能够使用keywordabstact来描写叙述一个尚未被详细实现的方法,该方法不能包括方法体 一个抽象方法仅仅 ...
- 狄利克雷过程（Dirichlet Process）
0. 引入 现观察得到两个样本 θ1,θ2,来推测它们可能来自的分布: 假设来自于连续型概率密度函数, θ1,θ2∼H(θ) 则 θ1,θ2 相等的概率为 0,p(θ1=θ2)=0 概率为 0,不代表 ...
- MIT墙上的格言（如果你把任务留到最后一分钟，那么你一定能在一分钟内完成任务）
1,永远不能忘记傅立叶变换. Never far no can forget Fuliye changer. 2,盲目的研究者就像法拉第和麦克斯韦之间的电学家一样无所适从. Blind Eye's r ...
- 使用 advanced installer 为 winform 做自动更新
原文:使用 advanced installer 为 winform 做自动更新 advanced installer 是一款打包程序,基于 windows installer 并扩展了一些功能,比如 ...
- 协程在Web服务器中的应用（配的图还不错）
协程(纤程,微线程)这个概念早就有之,各家互联网公司也都有研究,但在国内各大论坛和大会热起来,还是今年的事. 最近参与讨论开放平台建设和架构设计过程中,有同事提到了使用协程代替线程,能够很大幅度的提高 ...
- ios 调用系统发短信以及打电话功能
先介绍一种最简单的方法: 调用打电话功能 [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"tel://100 ...
- WPF 流打印
原文:WPF 流打印 PrintDialog printDialog = new PrintDialog(); if (printDialog.ShowDialog() == true) { Syst ...
- winform实现DataGridView全选
之前写过,一时想不起来就在网上找了一些.结果感觉好麻烦.于是就自己打开之前做过的功能.找到源码. private void CheckDatabasexuan() { DataGridViewChec ...
- C#从列表中取元素的某个字段组成新的列表
using System; using System.Collections.Generic; using System.Linq; namespace CSharpDemo { class Prog ...
- 管道通信实例（A程序作为服务器，不断从B程序接收数据，并发送到C程序中）
A程序作为服务器,不断从B程序接收数据,并发送到C程序中:#include <stdio.h>#include <conio.h> #include <tchar.h&g ...