边框样式的写法总结
作者:Ghost 来源:CSS森林 发布时间:2009-01-18 13:00:00
今天在群(CSS森林:30247792)里讨论了border的样式写法,发现border的写法还真是灵活,做了一下总结,希望对大家有用:
border : border-width || border-style || border-color
border是一个复合的属性,它可以同时定义上右下左四个边框,当四个边都是同个样式时可以使用,如:
=================CSS=================
border:1px solid #FF00FF。
=====================================
这是最简单的应用,如果四个边的样式不是相同的怎办?一般会有下面几种情况,写法差不多:
===============CSS===================
/*边框样式、宽度、颜色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
/*边框样式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}
/*边框宽度不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border-width:1px 2px 1px 1px;
border:solid #FF00FF;
}
/*边框颜色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
=====================================
还有就是有些边框是没有的,比如只有底边:
================CSS==================
.div1{
/*错误的*/
border:none;
border-bottom:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:none none solid;
}
=====================================
注意:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
猜你喜欢
- JavaScript Length 字符长度函数,在很多时间我们会用length函数了,因为你得前台判断一个用户输入
- 左右结构是平常页面中最经常看到的结构,简洁一些的页面就会使用边框将左右两边隔开,但往往由于左右两边的内容可能是不等高的,所以就会有一高一低的
- 双击编辑功能如何实现:例如:标题 (鼠标双击“标题”文字 即出现可编辑的输入框形式及提交按钮) <!D
- 不知道做网络程序的朋友是否重视COOKIES作用域对于多域名或 主域与WWW二级域名同时共用一站点,设置Cookies的作用域,让整个网站用
- Union 与 Union ALL 的作用都是合并 SELECT 的查询结果集,那么它们有什么不同呢? Union 将查询到的结果集合并后进
- 可以的,看看下面的代码和说明:<%sessionID = session.SessionIDtimeout&nbs
- Microsoft office Access Database Engine 错误 '80040e14' Insert I
- 在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原
- 这个验证类的完成有很长时间了,一直没有分享给大家使用了这么长时间之后感觉挺顺手,用于一些不需要特殊效果的表单验证个人认为已经足够了,还是挺好
- 一、MySQL数据库的实例管理器概述:1、MySQL数据库的实例管理器(IM)是通过TCP/IP端口运行的后台程序,用来监视和管理MySQL
- String Types(字符串类型)字符串类型Mysql支持多种字符串类型的变体。 这些数据类型在4.1和5.0版本中有较大的变化, 这使
- 我们经常会遇到多重查询问题,而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入查询条件时,如用普通方法将更是难上加难。以下巧
- 工欲善其事,必先利其器。作为更专业的前端工程师,我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码,首先要作的就是对
- 代码如下:--创建测试表 DECLARE @Users TABLE ( ID INT IDENTITY(1,1), UserIn
- 汉字转换为UTF-8的一段代码终于找到这段代码了,一个ASP写的中文转UTF-8,大家可以试试function chinese2u
- 程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下
- 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。你在写HTM
- (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ )之前js 仿Photoshop
- 本文详细介绍了asp中如何使用sql语句删除数据库中的记录,初学asp者来看看!1,首先要明确删除哪条记录无非还就是SQL语句了,比如对应到
- ctrl+Enter:重建ctrl+0:相当于点击当前行左方的加号或减号ctrl+E:打开新窗口预览ctrl+T:替换\t为两个空格tab: