腾讯云618限量抢购
  1. HTML教程

CSS 边框 border

最后更新:2010-10-12 12:24阅读:18184

边框(border)

边框(border)是围绕内边距和内容的一条或多条线。当把 border 定义为 1px 时可以看做是一条线,宽度超过 1px 时可以看做是多条线。

border 是个复合属性,常用的属性有宽度,颜色,样式及方位等。

边框宽度

“border-width”属性用于设定边框宽度。

可能的取值如下:
取值 说明
medium 默认值,默认宽度
thin 小于默认宽度
thick 大于默认宽度
长度值 由浮点数字和单位标识符组成的长度值,不可为负值

例子:

#div1{ border-width: 1px 1px 2px 3px; }

该例子按照“上-右-下-左”顺序设定四个方位边框分别为“1px 1px 2px 3px”。同 margin 一样,该取值支持赋值简写,具体可参见《CSS 外边距 margin》赋值简写部分。

边框颜色

“border-color”属性用于设定边框颜色。

例子:

#div1{ border-color: #FFFFFF; }

同 border-color 一样,该取值支持赋值简写,可以分别设定各边属性。赋值简写内容具体可参见《CSS 外边距 margin》赋值简写部分。

边框样式

border-style 属性用于设定边框样式。

可能的取值如下:
取值 说明
none 默认值,无边框,border-width 属性无效
hidden 隐藏边框,某些IE浏览器版本不支持
dotted 点线
dashed 虚线
solid 实线
double 双线边框,两条单线与其间隔的和等于设定的 border-width 值
groove 根据 border-color 的值画3D凹槽
ridge 根据 border-color 的值画3D凸槽
inset 根据 border-color 的值画3D凹边
outset 根据 border-color 的值画3D凸边

例子:

#div1{ border-style: dashed; }

提示

根据 CSS 规范,边框 border 是在背景之上的。也就是说,如果边框样式设置为点线或者虚线,那么边框空出的部分则会显示出背景来。

边框方位

“border”结合子属性用于表示4个方位。

4个方位属性:
属性 说明
border-top 设置元素上边框的样式
border-right 设置元素右边框的样式
border-bottom 设置元素下边框的样式
border-left 设置元素左边框的样式

各个方位属性还可以跟 widht、color、style 结合来设置各边属性。一些例子:

  • border-top-color:设置上边框颜色
  • border-bottom-style:设置上边框样式

border复合属性说明

边框的复合属性为边框的设置提供了灵活多变的设置条件,具体是使用复合属性还是使用单独的属性设置,要根据实际情况来决定。

使用复合属性的例子:

#div{ border: 1px dashed #999999; }
腾讯云618限量抢购