6.3 设计边框样式

边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框所显示出来的外观。CSS3中分别使用border-style、border-width和border-color这三个属性设定边框的外观。

6.3.1 案例10——设置边框样式

border-style属性用于设定边框的样式，也就是风格。边框格式是边框最重要的属性，它主要用于为页面元素添加边框。其语法格式如下所示。

border-style : none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset

CSS3设定了9种边框样式，如表6-7所示。

表6-7 边框样式

【例6.11】（案例文件：ch06\6.11.html）

在IE 11.0浏览器中浏览效果如图6-13所示，可以看到网页中，标题h1显示的时候带有边框，其边框样式为点线式边框；同样段落也带有边框，其边框样式为双线式边框。

图6-13 设置边框

提示

在没有设定边框颜色的情况下，groove、ridge、inset和outset边框默认的颜色是灰色。dotted、dashed、solid和double这四种边框的颜色基于页面元素的color值。

其实，这几种边框样式还可以分别定义在一个边框中，从上边框开始按照顺时针的方向分别定义边框的上、右、下、左边框样式，从而形成多样式边框。例如，有下面一条样式规则：

p{border-style:dotted solid dashed groove}

另外，如果需要单独定义边框一条边的样式，则可以使用如表6-8所列的属性来定义。

表6-8 各边样式属性

6.3.2 案例11——设置边框颜色

border-color属性用于设定边框颜色，如果不想与页面元素的颜色相同，则可以使用该属性为边框定义其他颜色。border-color属性语法格式如下所示。

border-color : color

color表示指定颜色，其颜色值通过十六进制和RGB等方式获取。同边框样式属性一样，border-color属性可以为边框设定一种颜色，也可以同时设定四个边的颜色。

【例6.12】（案例文件：ch06\6.12.html）

在IE 11.0浏览器中浏览效果如图6-14所示，可以看到网页中，第一个段落边框颜色设置为红色，第二个段落边框颜色分别设置为红、蓝、黄和绿。

图6-14 设置边框颜色

除了上面设置四个边框颜色的方法之外，还可以使用如表6-9列出的属性单独为相应的边框设定颜色。

表6-9 各边颜色属性

6.3.3 案例12——设置边框线宽

在CSS3中，可以通过设定边框宽度，来增强边框效果。border-width属性就是用来设定边框宽度，其语法格式如下所示。

border-width : medium | thin | thick | length

其中预设有三种属性值：medium、thin和thick，另外，还可以自行设置宽度（width），如表6-10所示。

表6-10 border-width属性

【例6.13】（案例文件：ch06\6.13.html）

在IE 11.0浏览器中浏览效果如图6-15所示，可以看到网页中，三个段落边框以不同的粗细显示。

图6-15 设置边框宽度

border-width属性其实是border-top-width、border-right-width、border-bottom-width和border-left-width这四个属性的综合属性，分别用于设定上边框、右边框、下边框、左边框的宽度。

【例6.14】（案例文件：ch06\6.14.html）

在IE 11.0浏览器中浏览效果如图6-16所示，可以看到网页中，段落的四个边框以不同的宽度显示。

图6-16 分别设置四个边框宽度

6.3.4 案例13——设置边框的复合属性

border属性集合了上述所介绍的三种属性，可以为页面元素设定边框的宽度、样式和颜色。语法格式如下所示。

border : border-width | border-style | border-color

其中，三个属性顺序可以自由调换。

【例6.15】（案例文件：ch06\6.15.html）

在IE 11.0浏览器中浏览效果如图6-17所示，可以看到网页中，段落边框样式以破折线显示、颜色为红色、宽度为12像素。

图6-17 设置边框复合属性