CSS元素边框：border属性

CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的 3 个方面：样式、宽度，以及颜色。
通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。
CSS2 指出背景只延伸到内边距，而不是边框。
CSS2.1 则进行了更正：元素的背景是内容、内边距和边框区的背景。
大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。
提示：有些边框是“间断的”（如点线边框），元素的背景会出现在边框的可见部分之间。

边框的样式
样式是边框最重要的一个方面，样式控制着边框的显示，如果没有样式，将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

定义多种样式
您可以为一个边框定义多个样式（按照 top-right-bottom-left 的顺序），例如：

p.aside {border-style: solid dotted dashed double;}

注释：为 aside 定义边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

定义单边样式
如果您希望为元素框的某一个边设置边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后，否则将被简写属性覆盖。

边框的宽度
您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：
指定长度值，比如 2px 或 0.1em；或者使用关键字：thin 、medium（默认值）和 thick。
注释：CSS 没有定义 3 个关键字的具体宽度，由用户代理样式表（浏览器样式）设置。

p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: thick;}

定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为（这样写法称为值复制）：

p {border-style: solid; border-width: 15px 5px;}

您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的规则与上面的例子是等价的：

p {
    border-style: solid;
    border-top-width: 15px;
    border-right-width: 5px;
    border-bottom-width: 15px;
    border-left-width: 5px;
}

没有边框
在前面的例子中，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。
那么如果把 border-style 设置为 none 会出现什么情况：

p {border-style: none; border-width: 50px;}

注释：尽管边框的宽度是 50px，但是边框样式设置为 none。此时，边框的宽度也会变成 0。
提示：如果边框样式为 none，即表示边框根本不存在（无边框），边框宽度自动设置为 0。
注意：忘记声明边框样式是一个常犯的错误。例如，下面规则中 h1 元素不会有任何边框：

h1 {border-width: 20px;}

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。
因此，如果您希望边框出现，就必须声明一个边框样式。

边框的颜色
CSS 使用一个简单的 border-color 属性来设置边框颜色，它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
}

提示：如果颜色值小于 4 个，值复制就会起作用。
例如，下面的规则声明了段落的上下边框是蓝色，左右边框是红色：

p {
    border-style: solid;
    border-color: blue red;
}

注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
例如，要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {
    border-style: solid;
    border-color: black;
    border-right-color: red;
}

透明边框
如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

<html>
<head>
<style type="text/css">
    a:link, a:visited {
        border-style: solid;
        border-width: 5px;
        border-color: transparent;
    }
    a:hover {border-color: gray;}
</style>
</head>
<body>
    <a href="#">AAA</a>
    <a href="#">BBB</a>
    <a href="#">CCC</a>
</body>
</html>

注释：利用 transparent，使用边框就像是额外的内边距一样，在你需要的时候使其可见。
注释：这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（有可见背景时）。
提示：在 IE7 之前的版本不支持 transparent，IE 会根据元素的 color 值来设置边框颜色。

所有边框属性在一个声明之中

<html>
<head>
<style type="text/css">
p {
    border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
    <p>Some text</p>
</body>
</html>

注释：本例演示用简写属性来将所有四个边框属性设置于同一声明中。

设置边框

p.one {border-style: solid}
p.two {border-style: solid double}
p.three {border-style: solid double groove}
p.four {border-style: solid double groove dotted}
p.B-width {
    border-style: solid;
    border-width: 5px 10px 1px medium
}
p.B-color {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
p.B-bottom {
    border-style: solid;
    border-bottom: thick dotted #ff0000;
}
p.other {
    border-style: solid;
    border-top-style: dotted;
    border-right-width: thin;
    border-bottom-color: #ff0000;
    border-left: thick double #ff0000;
}

注释："border-width" 属性单独使用无效，请首先使用 "border-style" 属性来设置边框。
注释："border-color" 属性单独使用无效，请首先使用 "border-style" 属性来设置边框。

CSS 边框属性及描述
border：简写属性，用于把针对四个边的属性设置在一个声明。
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width：用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color：设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-top：简写属性，用于把上边框的所有属性设置到一个声明中。
border-right：简写属性，用于把右边框的所有属性设置到一个声明中。
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。
border-left：简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color：设置元素的左边框的颜色。
border-left-style：设置元素的左边框的样式。
border-left-width：设置元素的左边框的宽度。

本文番号： 前端笔记 - CSS/CSS3 - CSS元素边框：border属性

2016-08-03 3809人浏览

CSS元素边框：border属性

评论

点击这里取消回复

网站分类

热门推荐

猜你喜欢

公众号