《设置对象边框》PPT课件.ppt

第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.2 边框颜色,通过上一节对border属性的介绍，对其参数也有所了解，本节就对参数之一边框颜色做讲解，从前面介绍可以知道，边框颜色由border-color表示，后面接颜色值，表示设置边框的颜色，完整代码如下：border-color:color从前面表示颜色的属性可以知道，color的表示是不同的方式，在此不打算再做介绍。但要注意的是，颜色值可以接多个，在前面实例中都只有一种颜色，表示四边框的颜色，如果提供全部四个参数值，将按上右下左的顺序作用于四个边框；如果只提供一个，将用于全部的四条边；如果提供两个，第一个用于上下，第二个用于左右；如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,22.3 边框样式,边框样式用来表示对象边框不同的效果，不同的对象包括层，图像等，可以设置其各式各样的效果，如常用的实线，还可以设置为虚线，点线等。设置边框的样式用border-style表示，其后所接的值为边框的不同样式，即多个参数中可选择一个来表示对象的边框样式，稍后讲解。与边框颜色一样，边框样式也是边框属性的参数之一，由本章第1节可知，边框复合属性由边框颜色、边框样式和边框宽度组成，而本小节讲解的是边框样式，组成边框复合属性的重要属性，用来表示对象的边框样式，参数只是其中的一个值，下面代码表示边框样式属性的完整语法：border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset,22.4 边框宽度,前面几节中介绍了边框复合属性的语法以及其组成的属性，前面的小节，介绍了边框复合属性中的两个属性：边框颜色和边框样式。其中边框颜色用border-color表示，而边框样式用border-style表示，本小节来介绍border复合属性的最后一个属性用法，即边框宽度。边框宽度语法用border-width表示，用来设置对象边框中的宽度值，边框宽度的属性值有两种表示方法，最常用的为直接接数值，然后接上单位，而第二种方法为接表示宽度的词，通过三个单词来表示边框为宽、中等宽和窄，与其他属性设置属性一样，只能在两种表示方法中选择一个值，下面是完整的语法形式。border-width:medium|thin|thick|length参数medium：默认值，表示默认宽度。参数thin：表示小于默认宽度。参数thick：表示大于默认宽度。参数length：直接表示边框宽度的值。,22.5 对象的四个边框,从前面中可以学到，边框（border）是复合属性，这个复合属性由边框颜色、边框样式和边框宽度组成的，所表示的边框为顶端、右端、底端和左端的边框值，而且是同一个效果的值。边框属性是复合属性，是由上端、右端、下端和左端边框属性组成的复合属性，也可以单独表示的某一方向的边框，如只设置对象顶端的边框，以区分其他的边框。为了实现边框在不同方向设置边框属性，需要对不同边框方面的属性进行设置。在网页中表示的边框都是矩形的，即有上下左右的边框围成对象，在本书中也称之为顶端、右端、底端和左端的边框。通过边框方向属性可以设置边框在不同位置的边框值，代码如下所示。属性border-top：表示顶端的边框。属性border-right：表示右端的边框。属性border-bottom：表示底端的边框。属性border-left：表示左端的边框。,22.5.1 设置顶端边框的属性,顶部边框的属性专用来设置对象的顶部边框。设置本属性，与其他方向的边框值没有影响，同时，属性值所接的值与复合属性一样，由边框宽度、边框颜色和边框样式组成的。代码如下。border-top:border-width|border-style|border-color顶端的边框属性由border-top表示，其属性值有三个参数，第一个border-width表示顶部边框的宽度，第二个border-style表示顶部边框的样式，第三个border-color表示顶部边框的颜色。需要注意的是，对这三个参数值的顺序没有要求，即可以以任意顺序出现。设置了顶端边框后，就确定了顶部的边框效果，代码22.5表示border-top在对象层中的用法。,22.5.2 设置右端边框的属性,与顶端的边框一样，右端的边框属性也是边框四个方向属性成员之一，右端的边框属性用border-right表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成的。完整代码如下：border-right:border-width|border-style|border-color本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示右端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只对该设置的方面影响。右端边框是组成四个边框方向的属性之一，为了表示右端的边框用法，代码22.6演示border-right用法。,22.5.3 设置底端边框的属性,与顶端的边框一样，底端的边框属性也是边框四个方向属性成员之一，底端的边框属性用border-bottom表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成。完整代码如下：border-bottom:border-width|border-style|border-color本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示底端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只对该设置的方面影响。底端边框是组成边框的四个方向的属性之一，为了表示底端的边框用法，代码22.7演示border-bottom用法。,22.5.4 设置左端边框的属性,与顶端的边框一样，左端的边框属性也是边框四个方向属性成员之一，左端的边框属性用border-left表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成。完整代码如下：border-left:border-width|border-style|border-color本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示左端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只对该设置的方面影响。左端边框是组成边框的四个方向的属性之一，为了表示左端的边框用法，代码22.8演示border-left用法。,22.6 边框实例手把手双边框,本实例手把手来完成两件事：第一，用完整的实例来演示边框的所有属性以及用法，总结本章学习边框的知识。第二，用实例来设置多层边框，通过CSS属性来设置双边框的效果。,22.6.1 实例手把手,本实例对不同的层对象设置边框。属性由本章所学的边框知识作为演示的对象，通过以下步骤来实现这些用法，在本小节的实例中，将要完成的是边框的四个方位属性在网页中的用法。,22.6.2 设置多层边框,有时单条边框不能表达出边框的效果，换言之，有更好的方法可以在某些应用比单边框效果会好些。有一种用法，两个层中，大层用背景与小层的背景相区别，然后在大层中加上不同颜色的边框，这样就会出现3个颜色，看起来有立体效果，如百度知道的边框就是利用这种方式布局，只不过百度用到了边框圆角，圆角在以后的实例中也会讲解。下面的代码是如何布局类似的边框，但不会按步骤讲解，请多看代码中的解析。本小节介绍在布局中实用的多边框用法，在多个边框中，用到不同颜色的边框组成一个对象的边框效果，从外观给人的感觉有层次感，表现出有阴影的3D效果，如代码20.11所示。,22.7 小结,本章主要介绍了边框border属性。border是复合属性，参数包括border-color、border-width和border-style，分别表示边框颜色、边框宽度和边框样式。边框的四个边都可以用颜色、宽度和样式这三个属性表示，同时也是复合属性，如border-top:1px solid red表示border-top-width为1像素、border-top-style为solid，即实线、border-top-color为红色。同理，其他方向边框也可这样表示。最后用实例再次演示了边框必需要理解的知识点，同时用实例对多层边框进行了举例。,