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

ed4cb39125df4e16a5a79afb1b62e3b1.jpg

5  边框属性

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

a.边框风格属性

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

db9fd9617e9b45829a43457efeecbc95.png

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

例句如下所示:

扫描二维码关注公众号,回复: 7684196 查看本文章

2fab769cdf5546ed8ee2d9d97ecf9706.jpg

b.边框宽度属性

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

c818de6d7aae499f92f097ebaa51fc0e.jpg

c.边框颜色属性

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

4393cb5cc95d4135ae161b4703551d1a.jpg

d.略写的边框属性

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

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

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

猜你喜欢

转载自www.cnblogs.com/itxdl/p/11762758.html