《设置对象边框》PPT课件

《《设置对象边框》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第22章设置对象边框现在网页布局都喜欢用DIV和CSS结合，而通过DIV可以设置容器层的边框，使层对象的大小直观地表现出来，现在的网页都是用边框把内容包围起来，使页面更美观，更有模块感。细心的读者会发现，边框在前面章节中的实例中已用到了，不过前面用到的是边框的复合属性border，本章中除了介绍复合属性外，还会介绍边框的其他单属性。学完本章，可以了解以下知识点：边框的基本语法边框颜色表示边框样式表示边框宽度表示边框的四边设置边框的应用22.1边框的基本语法边框是对象的边界框图，用来设置对象的边框样式，语法用border表示，是复合属性，由颜色，样式和宽度组成，其语法完整表示如下

2、：border:border-width

3、

4、border-style

5、

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

7、，对象是没有边框的，代码22.1表示有border属性设置的层对象和没有border属性（即默认的）的层对象比较。22.2边框颜色通过上一节对border属性的介绍，对其参数也有所了解，本节就对参数之一边框颜色做讲解，从前面介绍可以知道，边框颜色由border-color表示，后面接颜色值，表示设置边框的颜色，完整代码如下：border-color:color从前面表示颜色的属性可以知道，color的表示是不同的方式，在此不打算再做介绍。但要注意的是，颜色值可以接多个，在前面实例中都只有一种颜色，表示四边框的颜色，如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框；

8、如果只提供一个，将用于全部的四条边；如果提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。22.3边框样式边框样式用来表示对象边框不同的效果，不同的对象包括层，图像等，可以设置其各式各样的效果，如常用的实线，还可以设置为虚线，点线等。设置边框的样式用border-style表示，其后所接的值为边框的不同样式，即多个参数中可选择一个来表示对象的边框样式，稍后讲解。与边框颜色一样，边框样式也是边框属性的参数之一，由本章第1节可知，边框复合属性由边框颜色、边框样式和边框宽度组成，而本小节讲解的是边框样式，组成边框复合属性的重要属

9、性，用来表示对象的边框样式，参数只是其中的一个值，下面代码表示边框样式属性的完整语法：border-style:none

10、dotted

11、dashed

12、solid

13、double

14、groove

15、ridge

16、inset

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

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

19、thin

20、thick

21、length参数medium：默认值，表示默认宽度。参数thin：表示小于默认宽度。参数thick：表示大于默认宽度。参数length：直接表示边框宽度的值。22.5对象的四个边框从前面中可以学到，边框（border）是复合属性，这个复合属性由边框颜色、边框样式和边框宽度组成的，所表示的边框为顶端、右端、底端

22、和左端的边框值，而且是同一个效果的值。边框属性是复合属性，是由上端、右端、下端和左端边框属性组成的复合属性，也可以单独表示的某一方向的边框，如只设置对象顶端的边框，以区分其他的边框。为了实现边框在不同方向设置边框属性，需要对不同边框方面的属性进行设置。在网页中表示的边框都是矩形的，即有上下左右的边框围成对象，在本书中也称之为顶端、右端、底端和左端的边框。通过边框方向属性可以设置边框在不同位置的边框值，代码如下所示。属性border-top：表示顶端的边框。属性border-right：表示右