CSS border属性用法详解

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

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

黑色的粗实线框即 border。

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

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

border-color 用来指定边框的颜色，它的设置方法与文字的 color 属性完全一样。通常情况下会将其设置为十六进制的值，例如红色为 #FF0000。对于 #336699 这样的十六进制值，可以将其缩写为 #369，当然也可以使用颜色的名称，如 red、green 等。
border-width 用来指定边框的粗细程度，可以设置为 thin（细）、medium（适中）、thick（粗）和 <length>。其中 <length>表示具体的数值，如 5px 和 0.1in 等。width 的默认值为 medium，一般的浏览器都会将其解析为 2px。
这里需要重点讲解的是 border-style 属性，它可以设置为 none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。它们分别表示“无”“隐藏”“点线”“虚线”“实线”“双线”“凹槽”“突脊”“内陷”“外凸”。其中，设置为 none 和 hidden 时都不显示边框，二者效果完全相同，只是运用在表格中时，设置为 hidden 可以用来解决边框冲突的问题。

设置边框样式（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 个属性值，它们的含义会有所区别，具体含义如下：

如果给出 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 设置边框属性