首页 > 代码库 > 3.2 边框(border)
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”。
其执行结果在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个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 例如，下面这段代码：
其含义是，上下边框为红色，左右边框为绿色；上边框宽度为l像素，下边框宽度为2像素，左右边框宽度为3像素；从上边框开始，顺时针方向，4个边框的样式分别为点线、虚线、实线和双线。 2.对一条边框设置与其他边框不同的属性 还可以单独对某一条边框在一条CSS规则中设置属性例如：
第1行表示将4条边框设置为2像素的绿色虚线，第2行表示将左边框设置为1像素的红色实线。这样，就不需要使用4条CSS规则分别设置4条变框的样式了，仅使用2条规则即可。 3．对一条边榧设置与其他边框不同的属性通过缩写形式可以灵活地设置各种边框。而如果要单独地设置某一条边框的某一个属性，例如要设置左边框的颜色为红色，可以写作：
注意：当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。 三、实验2——属性的缩写形式 请读者对照属性缩写形式的规则，分析下面这段代码执行后，4条边框最终的宽度、颜色和样式。示例文件位于网页教学网CSS教程资源“第3章\02.htm”。
在这个例子关于边框的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”。
在两种浏览器中的执行结果如图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 |