CSS 设置边框属性

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

1、border-style属性

border-style属性用于设定边框的样式，也就是风格。设定边框格式是边框最重要的部分，它主要用于为页面元素添加边框。CSS设定了9种边框样式，如表4-5所示。

表4-5 边框样式

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

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

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

表4-6 各边样式属性

2、border-width属性

在设定了边框的样式之后，就要根据需要来设定边框的宽度。border-width属性就是用来设定边框宽度，预设有三种属性值：medium、thin和thick，另外还可以自行设置宽度（width）。如表4-7所示。

表4-7 border-width属性

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

3、border-color属性

border-color属性用于设定边框的颜色。除了使用border-color属性外，还可以使用如表4-8列出的属性单独为相应的边设定颜色。

表4-8 各边颜色属性

4、border属性

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

border: [border-width] [border-style] [boder-color]

其中，三个属性顺序可以自由调换。使用border属性的子属性可以分别为边框的四个边设定宽度、样式和颜色。border属性如表4-9所示。

表4-9 border属性的子属性