设置对象边框.pptx

《设置对象边框.pptx》由会员分享，可在线阅读，更多相关《设置对象边框.pptx（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、于下。第1页/共13页22.3 边框样式边框样式用来表示对象边框不同的效果，不同的对象包括层，图像等，可以设置其各式各样的效果，如常用的实线，还可以设置为虚线，点线等。设置边框的样式用border-style表示，其后所接的值为边框的不同样式，即多个参数中可选择一个来表示对象的边框样式，稍后讲解。与边框颜色一样，边框样式也是边框属性的参数之一，由本章第1节可知，边框复合属性由边框颜色、边框样式和边框宽度组成，而本小节讲解的是边框样式，组成边框复合属性的重要属性，用来表示对象的边框样式，参数只是其中的一个值，下面代码表示边框样式属性的完整语法：border-style:none|dotted|d

3、ashed|solid|double|groove|ridge|inset|outset第2页/共13页22.4 边框宽度前面几节中介绍了边框复合属性的语法以及其组成的属性，前面的小节，介绍了边框复合属性中的两个属性：边框颜色和边框样式。其中边框颜色用border-color表示，而边框样式用border-style表示，本小节来介绍border复合属性的最后一个属性用法，即边框宽度。边框宽度语法用border-width表示，用来设置对象边框中的宽度值，边框宽度的属性值有两种表示方法，最常用的为直接接数值，然后接上单位，而第二种方法为接表示宽度的词，通过三个单词来表示边框为宽、中等宽和窄，与

4、其他属性设置属性一样，只能在两种表示方法中选择一个值，下面是完整的语法形式。border-width:medium|thin|thick|length参数medium：默认值，表示默认宽度。参数thin：表示小于默认宽度。参数thick：表示大于默认宽度。参数length：直接表示边框宽度的值。第3页/共13页22.5 对象的四个边框从前面中可以学到，边框（border）是复合属性，这个复合属性由边框颜色、边框样式和边框宽度组成的，所表示的边框为顶端、右端、底端和左端的边框值，而且是同一个效果的值。边框属性是复合属性，是由上端、右端、下端和左端边框属性组成的复合属性，也可以单独表示的某一方向的

5、边框，如只设置对象顶端的边框，以区分其他的边框。为了实现边框在不同方向设置边框属性，需要对不同边框方面的属性进行设置。在网页中表示的边框都是矩形的，即有上下左右的边框围成对象，在本书中也称之为顶端、右端、底端和左端的边框。通过边框方向属性可以设置边框在不同位置的边框值，代码如下所示。属性border-top：表示顶端的边框。属性border-right：表示右端的边框。属性border-bottom：表示底端的边框。属性border-left：表示左端的边框。第4页/共13页22.5.1 设置顶端边框的属性顶部边框的属性专用来设置对象的顶部边框。设置本属性，与其他方向的边框值没有影响，同时，属

6、性值所接的值与复合属性一样，由边框宽度、边框颜色和边框样式组成的。代码如下。border-top:border-width|border-style|border-color顶端的边框属性由border-top表示，其属性值有三个参数，第一个border-width表示顶部边框的宽度，第二个border-style表示顶部边框的样式，第三个border-color表示顶部边框的颜色。需要注意的是，对这三个参数值的顺序没有要求，即可以以任意顺序出现。设置了顶端边框后，就确定了顶部的边框效果，代码22.5表示border-top在对象层中的用法。第5页/共13页22.5.2 设置右端边框的属性与顶

7、端的边框一样，右端的边框属性也是边框四个方向属性成员之一，右端的边框属性用border-right表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成的。完整代码如下：border-right:border-width|border-style|border-color本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示右端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只对该设置的方面影响。右端边框是组成四个边框方向的属性之一，为了表示右端的边框用法，代码22.6演示border-righ

8、t用法。第6页/共13页22.5.3 设置底端边框的属性与顶端的边框一样，底端的边框属性也是边框四个方向属性成员之一，底端的边框属性用border-bottom表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成。完整代码如下：border-bottom:border-width|border-style|border-color本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示底端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只对该设置的方面影响。底端边框是组成边框的四个方向的属性之一

9、，为了表示底端的边框用法，代码22.7演示border-bottom用法。第7页/共13页22.5.4 设置左端边框的属性与顶端的边框一样，左端的边框属性也是边框四个方向属性成员之一，左端的边框属性用border-left表示，其后所接的值与border复合属性一样，由边框宽度、边框颜色和边框样式组成。完整代码如下：border-left:border-width|border-style|border-color本属性默认值参数为：medium none，而border-color的默认值将采用文本颜色。当然，这是表示左端的边框属性，与顶端的边框一样，设置了本属性与其他方向的属性没有影响，只

10、对该设置的方面影响。左端边框是组成边框的四个方向的属性之一，为了表示左端的边框用法，代码22.8演示border-left用法。第8页/共13页22.6 边框实例手把手双边框本实例手把手来完成两件事：第一，用完整的实例来演示边框的所有属性以及用法，总结本章学习边框的知识。第二，用实例来设置多层边框，通过CSS属性来设置双边框的效果。第9页/共13页22.6.1 实例手把手本实例对不同的层对象设置边框。属性由本章所学的边框知识作为演示的对象，通过以下步骤来实现这些用法，在本小节的实例中，将要完成的是边框的四个方位属性在网页中的用法。第10页/共13页22.6.2 设置多层边框有时单条边框不能表达

11、出边框的效果，换言之，有更好的方法可以在某些应用比单边框效果会好些。有一种用法，两个层中，大层用背景与小层的背景相区别，然后在大层中加上不同颜色的边框，这样就会出现3个颜色，看起来有立体效果，如百度知道的边框就是利用这种方式布局，只不过百度用到了边框圆角，圆角在以后的实例中也会讲解。下面的代码是如何布局类似的边框，但不会按步骤讲解，请多看代码中的解析。本小节介绍在布局中实用的多边框用法，在多个边框中，用到不同颜色的边框组成一个对象的边框效果，从外观给人的感觉有层次感，表现出有阴影的3D效果，如代码20.11所示。第11页/共13页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为红色。同理，其他方向边框也可这样表示。最后用实例再次演示了边框必需要理解的知识点，同时用实例对多层边框进行了举例。第12页/共13页感谢您的观看！第13页/共13页