第22章　设置对象边框

现在的网页布局都用DIV和CSS结合，通过DIV可以设置容器层的边框，使层对象的大小直观地表现出来，目前的网页都是用边框把内容包围起来，使页面更美观，更有模块感。

细心的读者会发现，边框在前面章节中的实例中已用到了，不过前面用到的是边框的复合属性border，本章中除了介绍复合属性外，还会介绍边框的其他单属性。

学完本章，可以了解以下知识点：

❑边框的基本语法；

❑边框颜色表示；

❑边框样式表示；

❑边框宽度表示；

❑边框的四边设置；

❑边框的应用。

22.1　边框的基本语法

边框是对象的边界框图，用来设置对象的边框样式，语法用border表示，是复合属性，由颜色、样式和宽度组成，其语法完整表示如下。

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

从以往学习的复合属性可以知道，没有声明是哪个方位条件下，都代表的是上右下左的方位，边框属性也不例外，即border表示的是四边的边框，参数border-width表示边框的宽度，border-style表示边框用什么样式表达（22.3节介绍），border-color表示边框的颜色。边框属性的参数默认值为medium none，参数medium指border-width的值，参数none指border-style的值，参数border-color的默认值将采用文本颜色，所以在默认条件下，对象是没有边框的，代码22.1表示有border属性设置的层对象和没有border属性（即默认的）的层对象比较。

代码22.1　源代码\第22章\border基本用法.html

—————————————文件名：border基本用法.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞border基本语法＜/title＞

04 ＜style type="text/css"＞

05 #bb1

06 {

07 /设置宽度/

08 width：200px；

09 /设置高度/

10 height：80px；

11 }

12 #b1

13 {

14 /设置边框为5像素红色实线/

15 border：5px solid red；

16 }

17 ＜/style＞

18 ＜/head＞

19 ＜body＞

20 ＜div id="bb1"＞

21 这个层对象没有border，即为默认值

22 宽为200像素，高为80像素。

23 ＜/div＞

24 ＜div id="b1"＞

25 border是对象的边框＜br＞

26 宽度为5像素，实线红色

27 ＜/div＞

28 ＜/body＞

29 ＜/html＞

【代码解析】在代码第15行设置了边框宽度为5像素，且为红色实线，而没有border属性的层只设置了宽和高，以确定层的大小，对比效果如图22.1所示。

图　22.1　border基本用法

除了属性border有宽度、样式和颜色这三个参数外，border四边的属性也具有这些参数，表示各个方位的边框样式，完整的语法形式如下。

/CSS代码：边框的四个方位属性/

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

border-right：border-width||border-style||border-color

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

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

以上的属性参数与border复合属性参数一样，都是由宽度、样式和颜色组成的，其默认值也是如此，它们的用法稍后一一介绍。

技巧　如果存在border属性和border-top属性对同一对象设置，其效果是最后设置的值。即前面的设置被后面的设置覆盖，border-left等也如此。