网站建设CSS规范清楚地指出元素的背景会延伸到边框边界之外，因为规范中提到，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

发布CSS2时，它指出背景只延伸到内边距，而不是边框。后来又对此做了更正，CSS2.1明确指出元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循CSS2.1定义，不过网站建设人员发现一些较老的浏览器可能会有不同的表现。背景颜色问题将在第9章更详细地讨论。

有样式的边框

先来讨论边框样式，这是边框最重要的一个方面，并不只是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS为属性border-style定义了10个不同的非inherit网页设计样式，包括默认值none。

样式值hidden等价于none，不过应用于表时除外，对于表，hidden用于解决边框冲突（更多详细信息见第11章）。

border-style

值：[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}| inherit

初始值：对简写属性没有定义

应用于：所有元素

继承性：无

计算值：见各个属性（border-top-style等）

说明：根据CSS1和CSS2,HTML用户代理只需支持solid和none丨其余的值（除hidden外）可能被解释为solid，这个限制在CSS2.1中被去除

最不可预测的边框样式是double，它定义为两条线的宽度再加上这两条线之间的空间等于border-width值（这将在下一节讨论）。不过，CSS规范并没有说其中一条线是否比另一条线粗，或者两条线是否应该一样粗，也没有指出线之间的空间是否应当比线粗。所有这些都由用户代理决定，网站建设人员对这个决定没有任何影响，所有边框color值都是gray，这就能更容易地看出视觉效果。边框样式的外观总是以某种方式基于边框的颜色，虽然具体的方式可能随用户代理的不同而有所不同。

假设你想为包含在未访问超链按内部的图像定义一个边框样式。可以将边框设置为outset，使之看上去像是“凸起按钮”，如图8-22所示：

a:link img{border-style:outset;}

同样地，边框的颜色要基于元素的color值。在这个例子中，这个值很可能是blue（不过在本书上显示不出来），因为图像包含在一个超链接中，而超链接的前景色通常是blue。如果需要，可以把color改为silver，如下：

a:link img{border-style:outset;color:silver.;}

边框现在将基于一种淡灰的silver，因为这是图像现在的前景色，尽管图像并没有使用这个前景色，但它还是会传递到边框。本章后面还会介绍另外一种改变边框颜色的方法。

多种样式

可以为给定边框定义多个样式，例如：

p.aside{border-style:solid dashed dotted solid;}

其结果是段落有一个实线上边框。虚线右边框、点线下边框和一个实线左边框。

我们又看到了这里的值采用了top-right-bottom-left的顺序，讨论用多个值设置不同外边距时也见过这个顺序。关干外边距和内边距值复制的规则同样适用于边框样式。因此，以下两个规则应该有相同的效果，如图8-23所示：

p.newl{border-style:solid dashed none;}

p.new2{border-style:solid dashed none dashed;}

有时网页设计人员可能只想为元素框的一边设置边框样式，而不是设置所有4个边的边框样式。这就要用到单边边框样式属性了。

border-top-style、border-right-style、border-bottom-style、border-left-style

值：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

初始值：none

应用于：所有元素

继承性：无

计算值：根据指定确定

单边边框样式属性的含义不言自明。例如，如果你想改变下边框的样式，可以使用border-bottom-style。

border与单边属性结合使用的情况很常见。假设你想在一个标题的三个边上设置实线边框，但是没有左边框，如图8-24所示。

为此有两种等价的方法：

h1{border-style:solid solid solid none;}

/*the method above is the same as the one below*/

h1{border-style:solid;border-left-style:none;}

要记住重要的一点，如果网页设计中要使用第二种方法，必须把单边属性放在简写属性之后，对于简写属性通常都是这样。这是因为如果声明border-style:solid，实际上是在声明border-style:solid solid solid sdlid。倘若把border-style-left:none放在border-style声明之前，简写属性的值就会覆盖单边值none。

到目前为止，你可能已经注意到，边框例子使用的都是相同宽度的边框。这是因为你没有定义width，所以它默认为某个值。接下来，我们将介绍这个默认值以及更多内容。