22.5.3　设置底端边框的属性

与顶端的边框一样，底端的边框属性也是边框四个方向属性成员之一，底端的边框属性用border-bottom表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成。完整代码如下。

border-bottom：border-width||border-style||border-color

本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示底端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只对该设置的方向影响。

代码22.7　演示了border-bottom用法。

代码22.7　源代码\第22章\border-bottom用法.html

————————————-文件名：border-bottom用法.html————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞border-bottom用法＜/title＞

04 ＜style type="text/css"＞

05 #btop

06 {

07 /设置宽度和高度/

08 width：200px；

09 height：150px；

10 /设置底端边框为5像素红色实线/

11 border-bottom：5px solid red；

12 }

13 ＜/style＞

14 ＜/head＞

15 ＜body＞

16 ＜div id="btop"＞

17 在这个层里面，只有底端存在边框＜br＞

18 宽为200px，高为150px。

19 ＜/div＞

20 上面的层高为150px。

21 ＜/body＞

22 ＜/html＞

【代码解析】代码第16行将btop层的宽设置为200像素，高设置为150像素，且只对该层的底端设置了边框。且设置的边框宽度为5像素，用红色实线表示。btop层外还有一行文本，通过边框把层与下方的文本分开，效果如图22.7所示。