22.4　边框宽度

前面几节中介绍了边框复合属性的语法以及其组成的属性，上一小节，介绍了边框复合属性中的两个属性：边框颜色和边框样式。其中边框颜色用border-color表示，而边框样式用border-style表示，本小节来介绍border复合属性的最后一个属性用法，即边框宽度。

边框宽度语法用border-width表示，用来设置对象边框中的宽度值，边框宽度的属性值有两种表示方法，最常用的为直接接数值，然后接上单位，而第二种方法为接表示宽度的词，通过三个单词来表示边框为宽、中等宽和窄，与其他属性设置属性一样，只能在两种表示方法中选择一个值，下面是完整的语法形式。

border-width：medium|thin|thick|length

❑参数medium：默认值，表示默认宽度。

❑参数thin：表示小于默认宽度。

❑参数thick：表示大于默认宽度。

❑参数length：直接接表示边框宽度的值。

由以上可知，属性值medium表示宽度为中等的边框宽度，也是默认的宽度，而当设置border-width为thin时，表示边框的宽度小于默认的宽度，与之相反的是，属性值thick表示大于默认宽度值的宽度，上面三种参数值并不是非选不可的，设置border-width的值为具体的数值时，表示边框的真实宽度。需要注意的是，设置参数length时要注意单位。代码22.4演示了边框宽度的用法。

代码22.4　源代码\第22章\边框宽度设置.html

——————————————文件名：边框宽度设置.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜meta http-equiv="Content-Type"content="text/html；charset=gb2312"/＞

04 ＜title＞边框宽度设置＜/title＞

05 ＜style type="text/css"＞

06 div

07 {

08 /设置顶部外补丁为15像素/

09 margin-top：15px；

10 /设置边框样式为实线/

11 border-style：solid；

12 }

13 #b1

14 {

15 /设置边框宽度为medium/

16 border-width：medium；

17 }

18 #b2

19 {

20 /设置边框宽度为thin/

21 border-width：thin；

22 }

23 #b3

24 {

25 border-width：thick；

26 }

27 #b4

28 {

29 border-width：1px；

30 }

31 #b5

32 {

33 border-width：10px；

34 }

35 ＜/style＞

36 ＜/head＞

37

38 ＜body＞

39 ＜div id="b1"＞

40 宽度为medium时，默认宽度。

41 ＜/div＞

42 ＜div id="b2"＞

43 宽度为thin时，小于默认宽度。

44 ＜/div＞

45 ＜div id="b3"＞

46 宽度为thick时，大于默认宽度。

47 ＜/div＞

48 ＜div id="b4"＞

49 宽度用数值1px时。

50 ＜/div＞

51 ＜div id="b5"＞

52 宽度用数值10px时。

53 ＜/div＞

54 ＜/body＞

55 ＜/html＞

【代码解析】在代码22.4中，用实例表示了边框宽度border-width的用法，在代码第16、21、25、29、33行通过设置边框宽度为medium、thin、thick。1px和l0px，表示边框的默认值、小于默认值和大于默认值，而在第4层中，也就是代码第29行设置了边框宽度为1像素，在最后一个边框中，即代码第33行设置了层对象的边框为10像素，效果如图22.4所示。

图　22.4　边框宽度设置

学完本小节，知道了边框复合属性（border）由边框颜色（border-color）、边框样式（border-style）和边框宽度（border-width）组成的。要设置一个边框的属性，除了这三个属性设置外，还可以单独用复合属性设置，如本书常设置边框值如下。

border：1px solid red；

以上代码表示设置对象的边框值为1像素的实线，且为红色的边框，是通过复合属性表示的，如用三个属性表示复合属性的效果如下。

border-width：1px；

border-style：solid；

border-color：red；

以上三行代码与复合属性的效果一样，可见，复合属性所表达效果的比用其属性表示效果的效率方面更高、更方便。这也正是在CSS中常用复合属性的原因。

除了复合属性能用三个属性组成外，对边框的四个角的边框也可以进行设置，如单独设置边框中的某一方向的边框值，边框的方向只有顶端、右端、底端和左端，关于这方面的知识，稍后再讲解。

说明　边框宽度最常用的是直接用数值表示其宽度。