首页 > 编程笔记

CSS border属性用法详解

边框（border）一般用于分隔不同的元素，其外围就是元素的最外围，因此计算元素实际的宽和高时，就要将边框也计算在内。换句话说，边框会占据空间，所以在计算精细的版面时，一定要把边框的影响考虑进去，如下图所示：


图 1 margin、border、padding、content示意图

黑色的粗实线框即 border。

边框的属性主要有 3 个，分别是 color（颜色）、width（粗细）和 style（样式）。在设置边框时常常需要将这 3 个属性很好地配合，才能得到良好的效果。

在使用 CSS 设置边框的时候，可以分别使用 border-color、border-width 和 border-style 来设置它们：

设置边框样式（border-style）

为了了解各种边框样式的具体表现形式，可参考如下代码：
<html>
<head>
<title>border-style</title>
<style type="text/css">
div{
    border-width:6px;
    border-color:#000000;
    margin:20px; padding:5px;
    background-color:#FFFFCC;
}
</style>
</head>
<body>
    <div style="border-style:dashed">The border-style of dashed.</div>
    <div style="border-style:dotted">The border-style of dotted.</div>
    <div style="border-style:double">The border-style of double.</div>
    <div style="border-style:groove">The border-style of groove.</div>
    <div style="border-style:inset">The border-style of inset.</div>
    <div style="border-style:outset">The border-style of outset.</div>
    <div style="border-style:ridge">The border-style of ridge.</div>
    <div style="border-style:solid">The border-style of solid.</div>
</body>
</html>

属性值的简写形式

在 CSS 中，可以用简单的方式确定边框的属性值。

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

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

方法是按照规定的顺序给出 2 个、3 个或者 4 个属性值，它们的含义会有所区别，具体含义如下：
例如下面这段代码： 
border-color: red green
border-width:1px 2px 3px;
border-style: dotted、dashed、solid、double;
其含义是上、下边框为红色，左、右边框为绿色；上边框宽度为 1px，左右边框宽度为 2px，下边框宽度为 3px；从上边框开始，按顺时针方向，4 个边框的样式分别为点线、虚线、实线和双线。

2) 在一行中同时设置边框的宽度、颜色和样式

要把 border-width、border-color 和 border-style 这 3 个属性合在一起，还可以用 border 属性来简写，示例如下：
border:2px green dashed
这表示将 4 条边框都设置为 2px 的绿色虚线，这样就比分为 3 条代码来写方便多了。

3) 对一条边框设置与其他边框不同的属性

在 CSS 中，还可以单独对某一条边框设置属性，示例如下： 
border: 2px green dashed;
border-left: 1px red solid
第 1 行表示将 4 条边框设置为 2px 的绿色虚线，第 2 行表示将左边框设置为 1px 的红色实线。最终的效果就是除了左侧边框之外的 3 条边框都是 2px 的绿色虚线，而左侧边框为 1px 的红色实线。这样就不需要使用 4 条 CSS 代码来分别设置 4 条边框的样式了，仅使用 2 条代码即可。

4) 同时设置一条边框的一种属性

有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，则可以将代码写为如下形式： 
border-left-color:red
类似地，如果希望设置上边框的宽度为 2px，则可以将代码写为如下形式。
border-top-width:2px
注意，当有多条代码作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。

动手实践

在上面讲解的基础上，请读者来做一个练习。对照属性缩写形式的规则，分析执行下面这段代码以后，4 条边框最终的宽度、颜色和样式。
<html>
<head>
<style type="text/css">
#outerBox{
    width:200px;
    height:100px;
    border:2px black solid;
    border-left:4px green dashed;
    border-color:red gray orange blue;  /*上  右  下  左*/
    border-right-color:purple;
}
</style>
</head>
<body>
    <div id="outerBox">
    </div>
</body>
在这个实例关于边框的 4 条 CSS 代码中，首先把 4 条边框设置成了 2px 的黑色实线，然后把左边框设置成了 4px 的绿色虚线，接着又依次设置了边框的颜色，最后把右边框的颜色设置成了紫色。最终的效果如下图所示：


图 2 设置边框属性

推荐阅读