美化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代表设置对象边框宽度 ...
随机推荐
- #748 – 获得按下时对应位置点的大小(Getting the Size of a Contact Point during Raw Touch)
原文:#748 – 获得按下时对应位置点的大小(Getting the Size of a Contact Point during Raw Touch) 原文地址:https://wpf.2000t ...
- NPM切换源
可以试试切换下你的NPM源.看是否能得到解决.国内的NPM有CNPM和淘宝的NPM源比较稳定.npm源切换和工具可参照站内贴 nrm工具的使用或者是直接用命令切换 npm config set r ...
- 好用的Markdown 编辑器及工具
Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,所以通过同一个名字它可以使用工具来转换成 HTML.readme 文件,在线论坛编写消息和快速创建富文本 ...
- 潜移默化学会WPF(难点控件treeview)--改造TreeView(CheckBox多选择版本),递归绑定数据
原文:潜移默化学会WPF(难点控件treeview)--改造TreeView(CheckBox多选择版本),递归绑定数据 目前自己对treeview的感慨很多 今天先讲 面对这种 表结构的数据 的其中 ...
- WPF CommandParameter的使用
<Window x:Class="Wpf180706.Window5" xmlns="http://schemas.microsoft.com/win ...
- CSS常见的选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android零基础入门第53节:拖动条SeekBar和星级评分条RatingBar
原文:Android零基础入门第53节:拖动条SeekBar和星级评分条RatingBar 前面两期都在学习ProgressBar的使用,关于自定义ProgressBar的内容后期会继续学习的,本期先 ...
- Use Spring @Scheduled To Achieve Timing Task
Today I have a chance to use the @Scheduled to achieve a timing task.It is useful.Anyway,it was the ...
- create table as 复制not null
创建一张表包含非空约束,唯一约束和check约束 SQL> create table dept( 2 ename varchar2(20) constraint mep_ename_nn not ...
- File handling in Delphi Object Pascal(处理record类型)
With new users purchasing Delphi every single day, it’s not uncommon for me to meet users that are n ...