IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3

5  边框属性

边框属性用于设置一个元素的边框风格、边框宽度、边框颜色，可以一起设置4条边的边框，也可对上边框、右边框、下边框和左边框单独设置。分别介绍如下。

a．边框风格属性

可以通过边框风格属性border-style设定上、下、左、右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1～4个关键字，如果4个值都给出了，则它们分别应用于上、右、下和左边框的样式。如果给出一个值，它将被运用到各边上。如果给出了两个或三个值，则省略了的值与对边相等。也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格，它们可以使用的属性值、解释和效果如图1所示。

图1  边框风格的属性值、解释和效果图

例句如下所示：

b．边框宽度属性

可以通过边框宽度属性border-width设定上、下、左、右边框的宽度，该属性用1～4个值来设置元素的边界，值是一个关键字或长度，不允许使用负值长度。如果4个值都给出了，则它们分别应用于上、右、下和左边框的样式。如果只给出一个值，它将被运用到各边上。如果给出了两个或三个值，则省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值，还可以用medium（默认值）、thin（比medium细）或thick（比medium粗）值。例句如下所示：

c．边框颜色属性

可以通过边框颜色属性border-color设定上、下、左、右边框的颜色，可以使用1～4个关键字。如果4个值都给出了，则它们分别应用于上、右、下和左边框的样式。如果给出一个值，则它将被运用到各边上。如果给出了两个或三个值，则省略了的值与对边相等。例句如下所示：

d．略写的边框属性

CSS属性border是边框属性的一个快捷的综合写法，是一个用于设置一个元素边框的宽度、样式和颜色的略写，它包含border-width、border-style和border-color属性。例句如下：

p {border:5px solid gray;}   /* 设置段落元素的4个边框为直线式边框、5像素宽的灰色 */

边框属性border只能设置4种边框，也只能给出一组边框的宽度和样式。为了给出一个元素的4种边框的不同的值，网页制作者必须使用一个或更多的属性，如上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框样式、上边框宽度、右边框宽度、下边框宽度或左边框宽度。