CSS设置边框信息技术.pptxVIP

CSS设置边框 边框属性包括边框样式、边框宽度和边框颜色，主要用来设置网页中各个元素的边框。这里的元素可以是一个段落、一张图片或一个表格等。每一个网页都可以看做是一个大的方框，而这个大方框又由不同的网页元素构成许多小的方框。设置边框 在CSS中，为设置边框外观，提供了边框样式属性。利用边框样式属性，可以设置单个边框的样式，设置各条边框样式的语法格式如下：border- style:属性值border-top-style:属性值border-left-style:属性值border-right-style:属性值border-bottom-style:属性值边框属性的常用值包括默认值none（不显示边框）、dotted（点线）、dashed（短线）、solid（实线）和double（双线）等属性。1.1 边框样式 定义样式.p1设置4个边框均为实线边框，样式.p2定义上边框为实线边框、左边框为点线边框、右边框为短线边框、底边框为双线边框。样式代码如下：.p1{border- style：solid}.p2{border-top-style:solid;border-left-style: dotted;border-right-style: dashed; border-bottom-style: double}网页中元素应用这些样式后，在浏览器中的显示效果如图1-18所示。【例1-18】 图1-18 设置边框样式 在CSS中，利用边框宽度属性来控制边框的宽度，其有5个属性值，设置边框宽度的语法格式如下：border-top-width：关键字|长度border-left-width：关键字|长度border-right-width：关键字|长度border-bottom-width：关键字|长度边框宽度关键字包括默认值medium（正常边框）、thin（细边框）和thick（粗边框）三种，长度包括长度值和长度单位，这和前面介绍过的使用长度值的各种属性的用法相同。1.2 边框宽度 定义样式.p1设置4个边框宽度均为thick（粗边框），样式.p2设置上边框的宽度为1px，左边框为thin（细边框）、底边框为thick（粗边框）、右边框的宽度为10px。样式代码如下：.p1{border-style:solid; border-width:normal}.p2{border-style:solid; border-top-width: 1px;border-left-width: thin; border-bottom-width:thick;border-right-width:10px;}网页中元素应用这些样式后，在浏览器中的显示效果如图1-19所示。【例1-19】 图1-19 设置边框宽度 设置边框的颜色，同样可以选择设置单条边框颜色或者统一设置4个边框的颜色。可以选用的边框颜色属性有5个，设置边框颜色的语法格式如下：border-color：颜色关键字|RGB值border-top-color：颜色关键字|RGB值border-left-color：颜色关键字|RGB值border-right-color：颜色关键字|RGB值border-bottom-color：颜色关键字|RGB值这里的颜色属性值和前面介绍的颜色属性值相同，可以使用颜色关键字或RGB值。1.3 边框颜色 定义样式.p1设置4个边框颜色均为蓝色，样式.p2设置上边框颜色为红色、左边框为蓝色、下边框为黑色、右边框为绿色。样式代码如下：.p1{border-style:solid;border-width:thick;border-color:blue;}.p2{border-style:solid;border-width:thick;border-top-color:red;border-left-color:#0000ff;border-bottom-color:black;border-right-color:#00ff00;}网页中元素应用这些样式后，在浏览器中的显示效果如图1-20所示。【例1-20】 图1-20 设置边框颜色 任务结束谢谢！