2024年7月2日发(作者：)

CSS 设置边框属性

页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边

线。每一个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方

面决定了边框所显示出来的外观。CSS中分别使用border-style、border-width和bor

der-color这三个属性设定边框的三个方面。

1、border-style属性

border-style属性用于设定边框的样式，也就是风格。设定边框格式是边框最重

要的部分，它主要用于为页面元素添加边框。CSS设定了9种边框样式，如表4-5

所示。

表4-5 边框样式

属性值

none

dotted

dashed

solid

double

groove

ridge

inset

outset

描述

无边框，无论边框宽度设为多大

点线式边框

破折线式边框

直线式边框

双线式边框

槽线式边框

脊线式边框

内嵌效果的边框

突起效果的边框

在没有设定边框颜色的情况下，groove、ridge、inset和outset边框默认的颜色

是灰色。dotted、dashed、solid和double这四种边框的颜色基于页面元素的color值。

其实，这几种边框样式还可以分别定义在一个边框中，从上边框开始按照顺时针的

方向分别定义边框的上、右、下、左边框样式，从而形成多样式边框。

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

属性来定义。

表4-6 各边样式属性

属性

border-top-style

border-right-style

border-bottom-style

border-left-style

描述

设定上边框的样式

设定右边框的样式

设定下边框的样式

设定左边框的样式

2、border-width属性

在设定了边框的样式之后，就要根据需要来设定边框的宽度。border-width属性

就是用来设定边框宽度，预设有三种属性值：medium、thin和thick，另外还可以自

行设置宽度（width）。如表4-7所示。

表4-7 border-width属性

属性值

medium

thin

thick

width

描述

缺省值，中等宽度

比medium细

比medium粗

自定义宽度

border-width属性其实是border-top-width、border-right-width、border-bottom-wi

dth和border-left-width这四个属性的综合属性，分别用于设定上边框、右边框、下

边框、左边框的宽度。

3、border-color属性

border-color属性用于设定边框的颜色。除了使用border-color属性外，还可以

使用如表4-8列出的属性单独为相应的边设定颜色。

表4-8 各边颜色属性

属性

border-top-color

border-right-color

border-bottom-color

border-left-color

设定上边框的颜色

设定右边框的颜色

设定下边框的颜色

设定左边框的颜色

描述

4、border属性

border属性集合了上述所介绍的三种属性，为页面元素设定边框的宽度、样式

和颜色。格式如下：

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

其中，三个属性顺序可以自由调换。使用border属性的子属性可以分别为边框

的四个边设定宽度、样式和颜色。border属性如表4-9所示。

表4-9 border属性的子属性

属性

border-top

border-right

border-bottom

border-left

描述

设定上边框

设定右边框

设定下边框

设定左边框