css边框属性.docx

CSS边框属性(border)的使用方法边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的,CSS可以用边框属性来定义它的样式、颜色和宽度等。在Html中人们用表格来制作文本周围的边框,但通过CSS来设置边框将有更出色的效果,而且可以应用于所有的元素。边框分为上边框、右边框、下边框、左边框。每个边框有3个方面:样式(或外观)、颜色、以及其宽度(粗细),下面我们分别重点解释这三项。边框样式(border-style)设置元素所有边框的样式,或者单独地为各边设置边框样式。它有10个属性值,分别是:none:无样式;hidden:同样是无样式,主要用于解决和表格的边框冲突;dotted:点划线;dashed:虚线;solid:实线;double:双线,两条线加上中间的空白等于border-width的取值;groove:槽状;ridge:脊状,和groove相反;inset:凹陷;outset:凸出,和inset相反;其中groove、ridge、inset、outset有些像3D效果,它的效果受border-color的影响。border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同,如果它书写四个参数值,将按照上-右-下-左的顺序定义边框。如果只设置一个,将用于四个边框统一设置。如果设置两个值,第一个作用于上下,第二个则作用与左右。如果设置三个值,第一个作用于上边框,第二个作用于左右边框,第三个作用于下边框。边框颜色(border-color)这个属性用来定义所有边框颜色,或者为四个边分别设置颜色。它可以取颜色的值或被设置为透明(transparent)。示例:.colorful{border-style:solid;border-color:gray;}border-color属性值的个数与其所对应方向的边框效果的设置方法和border-style的设置方法相同,可参照border-style属性学习理解。需要注意的是在border-color前最好先设置border-style,否则border-color可能会不显示。边框宽度(border-width)border-width可定义四个边框的宽度,即边框的粗细程度,它有四个可选属性值:medium(是缺省值,通常大约是2像素)thin(比medium细)thick(比medium粗)用长度单位定值。可以用绝对长度单位(cm,mm,in,pt,pc)或者相对长度单位(em,ex,px)。border-width属性值设置的个数与所对应方向产生的效果和border-style、border-color的设置方法相同,可参照border-style、border-color属性学习理解。边框(border)border是一个综合性写法,它设置的是四个边框的宽度、样式和颜色,不能对某一个边框单独设置。它的格式:border:border-widthborder-styleborder-color;示例:.bk01{border:3pxsolid#FF0000;}单边边框的设置方法除了以上介绍的几种属性,还有几种属性可以单独定义各方向的边框。下面对它们进行分类介绍。设定上边框属性:border-top,它的设置格式和border相同