3.2 边框(border)


border一般用于分隔不同元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。换句话说，border会占据空问，所以在计算精细的版面时，一定要把border的影响考虑进去，如图1所示，蓝色的虚线框即为border。


图1 border

border的属性主要有3个，分别是color（颜色）、width（粗细）和style（样式）。在设置border时常常需要将这3个属性很好地配合起来，才能达到良好的效果。在使用css设置边框的时候，可以分别使用border-color、border-width和border-style设置它们。

● border-color指定border的颜色，它的设置方法与文字的color属性完全一样，一共可以有256，种颜色。通常情况下设置为十六进制的值，例如红色为“#FF0000”。

经验：对于形如"336699"这样十六进制值，可以缩写为“#369”，当然也可以使用颜色的名称，例如red、green等。

● border-width用来指定border的粗细程度，可以设为thin、medium、thick和<length>。其中<length>表示具体的数值，例如5px和0.1in等。width的默认值为“medium”，一般的浏览器都将其解析为2px宽。lodidance.com

● 这里需要重点讲解的是style属性，它可以设为none、hidden、dotted、dashed、solid、double、groove．ridge、inset和outset等，其中none和hidden都不显示border,二者效果完全相同，只是运用在表格中时，hidden可以用来解决边框冲突的问题。

一、实验1——border-style

为了了解各种边框样式的具体表现形式，编写如下网页，示例文件位于网页教学网CSS教程资源“第3章\01.htm”。

  1. <html>
  2. <head>
  3. <title>border-style</title>
  4. <style type="text/css">
  5. div{
  6. border-width:6px;
  7. border-color:#000000;
  8. margin:20px; padding:5px;
  9. background-color:#FFFFCC;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div style="border-style:dashed">The border-style of dashed.</div>
  15. <div style="border-style:dotted">The border-style of dotted.</div>
  16. <div style="border-style:double">The border-style of double.</div>
  17. <div style="border-style:groove">The border-style of groove.</div>
  18. <div style="border-style:inset">The border-style of inset.</div>
  19. <div style="border-style:outset">The border-style of outset.</div>
  20. <div style="border-style:ridge">The border-style of ridge.</div>
  21. <div style="border-style:solid">The border-style of solid.</div>
  22. </body>
  23. </html>

其执行结果在IE 8和Firefox中略有区别，如图2所示  可以看到，对于groove，inset、outset和ridge这几种髓，IE都支持得不够理想。


图2 border-style

注意：IE浏览器不支持的border-style效果，在实际制作网页的时候，不推荐使用。

二、属性值的简写形式

1.对不同的边框设置不同的属性值

上一节的实验代码中，分别设置了border-color，border-width和border-style这3个属性，其效果是对上下左右4个边框同时产生作用。在实际使用CSS时，除了采用这种方式，还可以分别对4条边框设置不同的属性值。

方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

● 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；

● 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；

● 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

例如，下面这段代码：

  1. border-color:red green;
  2. border-width:1px 2px 3px;
  3. border-style:dotted dashed soild double;

其含义是，上下边框为红色，左右边框为绿色；上边框宽度为l像素，下边框宽度为2像素，左右边框宽度为3像素；从上边框开始，顺时针方向，4个边框的样式分别为点线、虚线、实线和双线。

2.对一条边框设置与其他边框不同的属性

还可以单独对某一条边框在一条CSS规则中设置属性例如：

  1. border:2px green dashed;
  2. border-left:1px red solid;

第1行表示将4条边框设置为2像素的绿色虚线，第2行表示将左边框设置为1像素的红色实线。这样，就不需要使用4条CSS规则分别设置4条变框的样式了，仅使用2条规则即可。

3．对一条边榧设置与其他边框不同的属性通过缩写形式可以灵活地设置各种边框。而如果要单独地设置某一条边框的某一个属性，例如要设置左边框的颜色为红色，可以写作：

  1. border-left-color:red

注意：当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。

三、实验2——属性的缩写形式

请读者对照属性缩写形式的规则，分析下面这段代码执行后，4条边框最终的宽度、颜色和样式。示例文件位于网页教学网CSS教程资源“第3章\02.htm”。

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #outerBox{
  5. width:200px;
  6. height:100px;
  7. border:2px black solid;
  8. border-left:4px green dashed;
  9. border-color:red gray orange blue;  /*上  右  下  左*/
  10. border-right-color:purple;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="outerBox">
  16. </div>
  17. </body>

在这个例子关于边框的4条CSS规则中，首先把4条边框设置为2像素的黑色实线，然后把左边框设置为4像索绿色虚线，接着义依次设置了边框的颜色，最后把右侧边框的颜色设置为紫色。最终的效果如图3所示。


图3 设置边框属性

四、实验3——边框与背景

在设置边框时，还有一点值得注意，在给元索设置background-color背景色时．IE作用的区域为content+padding，而Firefox则是content+padding+border。这在border设置为粗虚线时表现得特别明显，请看如下的实验代码。lodidance.com

这里设置一个div．并将其宽度设置为10像素，使效果非常明显。示例文件位于网页教学网CSS教程资源“第3章\03.htm”。

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #outerBox{
  5. width:128px;
  6. height:128px;
  7. border:10px black dashed;
  8. background:silver;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div id="outerBox">
  14. </div>
  15. </body>

在两种浏览器中的执行结果如图4所示．左边是IE中的效果，右边是Firefox中的效果，读者可以通过图中窗口左上角的图标区分浏览器。可看到IE并没有对border的背景上色，而Firefox的边框中显示出了背景色。


图4 IE与Firefox对待背景色的不同处理

虽然这个差别非常细微，但是在设计一些要求很高的页面时，还是需要注意的。

注意：不要因为上面这个例子，就误认为差别是因为IE和Firefox设置背景的基准点不同。实际上它们都是以padding为设置背景的基准点的。要验征这一点，可以把上面例子中的背景没置为一幅图像。

可以看出，二者的背景图像位置是完全相同的，区别只在于边框所占据的面积中，IE并不显示背景图像的内容，Firefox则显示背景图像的内容。因为边框是介于内边距和外边距之间的，当边框设置为虚线时，在IE中，虚线空白的地方露出来的是padding部分的背景，二在Firefox中，虚线空白的地方露出来的是margin部分的背景。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/665.html

3.2 边框(border),布布扣,bubuko.com

时间： 2024-10-30 06:24:43

3.2 边框(border)的相关文章

利用边框border的属性做小符号

前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右:  其css代码如下: .fuhao { position:absolute; top:12px; left:12px; width:0px; height:0px; overflow:hidden; border-width:6px 0px 6px 6px; border-color:transparent #A92222; border-st

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ <style> div { background-color: lightgrey; width: 300px;

CSS 边框(border)实例

1.用简写属性来将所有四个边框属性设置于同一声明中 border: medium double rgb(250,0,255) 2.设置四边框样式 border-style: dotted|dashed|solid|double|groove|ridge|inset|outset 3.用简写属性来将所有边框宽度属性设置于同一声明中 border-style: solid; border-width: 5px 10px 1px 4.设置四个边框的颜色.可以设置一到四个颜色 border-style:

理解CSS边框border

前面的话 ??边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 ??边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关 border: border-width border-color border-style border: 1px solid red; [边框样式] ??如果一个边框没有样式,边框将根本不会存在 ??关于虚线dashed,在chrome/firefox下,

CSS边框border

边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关     border: border-width border-color border-style    border: 1px solid red; [边框样式] 如果一个边框没有样式,边框将根本不会存在 关于虚线dashed,在chrome/firefox下,虚线宽高比是

clip-path 加边框border

最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层灰色,里面一层白色覆盖) <template> <section class="moveCompanyLimits"> <div class="tabBar"> <div class="tabBar_border&qu

[转]HTML中表格table边框border（1px还嫌粗）的解决方案：

摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白色: 这样,就大功告成了. 第二种方法: 1.设置BORDER=0 : 2.再通过CSS,给Table加上1px的border-top,border-left: 3.然后再设置所有的td的

css学习之border 边框

边框,也就是盒子模型的四周, 1.四边相同边框border简写#divcss5{border:1px solid #00F} CSS读取有从上到下.从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”

CSS border边框属性教程(color style)

CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html 二.Html原始边框与DIV+CSS边框对照 Html表格控制边框:border="1" bordercolo