3.6  边框

边框（border）是个很简单的概念，有很多种可能性。任何元素在周边都可以有边框。而且可以设置四边都有边框，也可根据你的需要只设置部分边上有边框。边框属性值很灵活，可以为每个边框设定相应的宽度、颜色或样式等。由于有这么多值需要设定，所以针对边框设定有很多声明的缩写方法。

3.6.1  边框属性

边框属性的默认值是中等厚度的边框，颜色继承父元素的文本颜色。只有为它设定其他的值时，默认状态才会改变。边框属性的完整列表如下：

控制边框比较简单，但还是有必要详细地讨论每个属性的使用方法。

1. boder-style

boder-style属性用于设定元素边框样式。在声明边框之前，浏览器首先要知道需要绘制的边框样式。也就是说，在定义边框的颜色之前要先声明此关键字。

此属性可以为单个、多个甚至全部边框设定样式。边框样式的可能关键字有：none（无边框）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽）、ridge（凸槽）、inset（凹边）和outset（凸边）。

下例中，CSS为一个容器加上了边框样式，该样式在div周围加上中等厚度的虚线框：

在浏览器中打开设计的网页时，其生成的边框如图3-8所示。

图3-8  应用border-style: dashed样式生成的边框

进一步考虑，针对各边设定特定的body-style属性可以用如下缩写来实现。与margin和padding一样，设定值的排列顺序为上、右、下和左：

图3-9给出了调整后的边框，上边框是虚线，右边框为点线，下边框为实线，左边框为斜凸槽样式。

图3-9  用一条声明语句设定四条不同形式的边框（虚线、点线、实线和凸槽线）

2. border-width

本节将讨论以下属性：border-width、border-top-width、border-right-width、border- bottom-width和border-left-width。你可以用这些属性来逐个地或一次性地定义元素边框的宽度。记住设定border-width属性值之前，需要先声明border-style属性。

除了使用相对度量外，本属性还有几个关键字，包括thin、medium和thick。值得注意的是，不同的浏览器用不同的方式定义这些值。也就是说，每个浏览器使用不同像素来表示这些关键字。如果你定义了一个border-style，但未定义border-width，则它的默认值为medium。

下例中，前面定义的border-style将与特定的border-width关键词和相对值结合在一起来定义边框：

结果如图3-10所示，其中，上边框的虚线最细，右边框是20像素的点线，底部边框为中等的实线，左边框为粗的凸槽线。

图3-10  为样式值设定宽度值（细虚线、粗点线、中等实线、粗凸槽线）

3. border-color

记住这一点，如果不声明边框的颜色，边框将继承元素或父元素中的对应值。由于颜色只有一个属性（border-color），所以如果定义多种颜色，必须用下面的缩写方式：

这样我们得到如图3-11中显示的从黑色（上边框）到淡灰色（左边框）的边框。

图3-11  为每条边框定义特定的颜色

4. border

用border、border-top、border-right、border-bottom和border-left属性可分别将给定的border-style、border-width和border-color属性的值集中到一个属性中。下面看一个利用这种方式缩写的例子。

基于前面的CSS例子，可按任意顺序设置border-color、border-style和border-width值：

我们得到同样的结果，但是规则中只需定义四个属性。如果所有的值相同，则属性名可以进一步减少，只用一个border：

得到的结果如图3-12所示。

图3-12  用一个属性border来声明的四条边框的效果

3.6.2  让边框变得明显

基于前面的例子，我们花了大量的时间来探讨边框样式的无限可能。如果尝试将边框值设置得很粗（30px或更大），你可以看到div的边角将变得像画框一样具有斜边。

一定要留意你所设计的边框在不同的浏览器中是如何实现的。记住，不是每一个浏览器都有所有的边框属性。比如说，相同的border-style值在IE中的显示结果与Safari相去甚远。