当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS边框属性(border)的如何使用

时间:2013-03-02 03:47来源:未知 作者:admin 点击:

标签:CSS边框属性(border)的如何使用 网站建设(1202)border(9)属性(68)CS(18)CSS(655)边框(13)如何(201)使用(77)
--> [网站建设之]CSS边框属性(border)的如何使用 我们晓得在CSS中边框的使用是十分主要的,咱们这里就介绍一下CSS的边框属性( border)如何应用。边框是缭绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的空隙是留给边框的,CSS可以用边框属性
CSS边框属性(border)的如何使用》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334U2013.htm
--> [网站建设之]CSS边框属性(border)的如何使用

我们晓得在CSS中边框的使用是十分主要的,咱们这里就介绍一下CSS的边框属性( border)如何应用。边框是缭绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的空隙是留给边框的,CSS可以用边框属性来定义它的样式、颜色和宽度等。 在Html中人们用表格来制造文本四周的边框,但通过CSS来设置边框将有更杰出的效果,而且可以利用于所有的元素。

边框分为上边框、右边框、下边框、左边框。

每个边框有3个方面:样式(或外观)、颜色、以及其宽度(粗细),下面我们分别重点说明这三项。

边框样式(border-style)
设置元素所有边框的样式,或者单独地为各边设置边框样式。它有10个属性值,分辨是:

none: 无样式;
hidden: 同样是无样式,重要用于解决和表格的边框抵触;
dotted: 点划线;
dashed: 虚线;
solid: 实线;
double: 双线,css语法结构,两条线加上旁边的空缺即是border-width的取值;
groove: 槽状;
ridge: 脊状,CSS设计网页头部的优化写法,和groove相反;
inset: 凹陷;
outset:凸出,和inset相反;


其中groove、ridge、inset、outset有些像3D效果,它的效果受border-color的影响,CSS设计制作长度高度不一样的网页区块

border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同,如果它书写四个参数值,将依照上-右-下-左的次序定义边框。如果只设置一个,将用于四个边框同一设置。如果设置两个值,第一个作用于高低,CSS设计中选择器的巧妙使用,第二个则作用与左右。如果设置三个值,第一个作用于上边框,第二个作用于左右边框,css设置最小height然后自适应,第三个作用于下边框。

边框颜色(border-color)
这个属性用来定义所有边框颜色,或者为四个边分离设置颜色。它能够取颜色的值或被设置为透明(transparent)。示例:


.colorful {border-style:solid;border-color:gray;}


border-color属性值的个数与其所对应方向的边框效果的设置方法和border-style的设置方法相同,可参照border-style属性学习理解。

须要留神的是在border-color前最好先设置border-style,CSS让网页里的提交按钮变得更漂亮,否则border-color可能会不显示。

边框宽度(border-width)
border-width可定义四个边框的宽度,即边框的粗细水平,它有四个可选属性值:

medium (是缺省值,通常大概是2像素)
thin(比medium细)
thick(比medium粗)
用长度单位定值。可以用相对长度单位(cm,CSS让网页提交input按钮与众不同, mm, in, pt, pc)或者绝对长度单位 (em, ex, px)。


border-width属性值设置的个数与所对应方向发生的后果和border-style、border-color的设置方式雷同,可参照border-style、border-color属性学习懂得。

边框(border)
border是一个综合性写法,它设置的是四个边框的宽度、款式跟色彩,不能对某一个边框独自设置。它的格局:


border: border-width border-style border-color,CSS让图片实现的透明效果;

示例:


.bk01 {border:3px solid #FF0000;}


单边边框的设置方法
除了以上先容的几种属性,还有多少种属性可以单独定义各方向的边框。下面对它们进行分类介绍。

设定上边框属性:

border-top,它的设置格式和border相同,顺次设置宽度、样式、颜色:


border-top: border-width border-style border-color;


border-top是将宽度、样式、颜色三种属性值放在一起设置的属性,如果要单独设置其中的任意一项也可以使用以下属性:border-top-width(单独设置上边框宽度)、border-style(单独设置上边框样式)、border-color(单独设置上边框颜色)。

示例:


#sbk01 {

border-top-width:1px;

border-top-style:dashed;

border-top-color:#FF0000;

}

/*设置上边框为宽度1像素的红色虚线*/}


以上的效果假如用border-top来设置的话更简略一些,代码如下:


#sbk01 {
border-top:1px dashed #FF0000; }


设定右边框属性:border-right,border-right-width,CSS让元素垂直居中的两种实现方法 ,border-right-style,border-right-color,设置方法同border-top。

设定下边框属性:border-bottom,border-bottom-width,border-bottom-style,border-bottom-color,CSS让元素垂直居中的两种实现方法,设置方法同border-top。

设定左边框属性:border-left,border-left-width,border-left-style,border-left-color,设置办法同border-top。 Tag:CSS边框   border   属性   CSS边框   border   属性  
(责任编辑:网站建设)
CSS边框属性(border)的如何使用相关文章
上一篇:css语法结构 下一篇:CSS选择符详细说明
回到顶部