边框(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个方位。
属性 | 说明 |
---|---|
border-top | 设置元素上边框的样式 |
border-right | 设置元素右边框的样式 |
border-bottom | 设置元素下边框的样式 |
border-left | 设置元素左边框的样式 |
各个方位属性还可以跟 widht、color、style 结合来设置各边属性。一些例子:
- border-top-color:设置上边框颜色
- border-bottom-style:设置上边框样式
border复合属性说明
边框的复合属性为边框的设置提供了灵活多变的设置条件,具体是使用复合属性还是使用单独的属性设置,要根据实际情况来决定。
使用复合属性的例子:
#div{ border: 1px dashed #999999; }