22.5　对象的四个边框

从前面的章节中可以知道边框（border）是复合属性，这个复合属性由边框颜色、边框样式和边框宽度组成的，所表示的边框为顶端、右端、底端和左端的边框值，而且是同一个效果的值。

边框属性是复合属性，是由上端、右端、下端和左端边框属性组成的复合属性，也可以单独表示某一方向的边框，如只设置对象顶端的边框，以区分其他的边框。为了实现边框在不同方向设置边框属性，需要对不同边框方面的属性进行设置。

在网页中表示的边框都是矩形的，即由上下左右的边框围成对象，在本书中也称之为顶端、右端、底端和左端的边框。通过边框方向属性可以设置边框在不同位置的边框值，代码如下所示。

❑属性border-top：表示顶端的边框。

❑属性border-right：表示右端的边框。

❑属性border-bottom：表示底端的边框。

❑属性border-left：表示左端的边框。

通过上面的属性可以设置不同位置的边框值，本小节分别介绍顶端、右端、底端和左端的属性值以及用法。

顶端边框的属性专门用来设置对象的顶部边框。设置本属性，与其他方向的边框值没有影响，同时，属性值所接的值与复合属性一样，由边框宽度、边框颜色和边框样式组成的。代码如下。

border-top：border-width||border-style||border-color

顶端的边框属性用border-top表示，其属性值有三个参数，第一个border-width表示顶部边框的宽度，第二个border-style表示顶部边框的样式，第三个border-color表示顶部边框的颜色。需要注意的是，对这三个参数值的顺序没有要求，即可以以任意顺序出现。

设置了顶端边框后，就确定了顶部的边框效果，代码22.5表示border-top在对象层中的用法。

代码22.5　源代码\第22章\border-top用法.html

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

01 ＜html＞

02 ＜head＞

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

04 ＜style type="text/css"＞

05 #btop

06 {

07 width：200px；

08 height：150px；

09 /设置顶部边框为5像素红色实线/

10 border-top：5px solid red；

11 }

12 ＜/style＞

13 ＜/head＞

14 ＜body＞

15 ＜div id="btop"＞

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

17 宽为200px，高为150。

18 ＜/div＞

19 上面的层高为150px。

20 ＜/body＞

21 ＜/html＞

【代码解析】代码第15行设置ID为btop的层对象的大小为宽200像素，高150像素。代码第5～11行设置顶部边框为5像素，且为红色实线，对其他方向和边框没有设置，即设置border-top属性，不会影响其他方向和边框，效果如图22.5所示。

图　22.5　border-top用法