22.5.4　设置左端边框的属性

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

图　22.7　border-bottom用法

border-left：border-width||border-style||border-color

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

代码22.8　演示了border-left用法。

代码22.8　源代码\第22章\border-left用法.html

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

01 ＜html＞

02 ＜head＞

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

04 ＜style type="text/css"＞

05 #btop

06 {

0 7 width：200px；

08 height：150px；

09 /设置左端边框为5像素红色实线/

10 border-left：5px solid red；

11 }

12 ＜/style＞

13 ＜/head＞

14 ＜body＞

15 ＜div id="btop"＞

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

17 宽为200px，高为150px。

18 ＜/div＞

19 上面的层高为150px。

20 ＜/body＞

21 ＜/html＞

【代码解析】与设置其他方向的属性一样，代码第10行在一个宽为200像素，高为150像素的层中，设置border-left的值为5px solid red，表示5像素的红色实线边框，且在对象的左端显示，效果如图22.8所示。

图　22.8　border-left用法

说明　不管在border中还是在border-right等四个方向的边框属性中，对border-width、border-style和border-color的顺序都可以用任意顺序，按自己的习惯书写即可，要注意中间是用空格分开。