365体育备用网址报道CSS 边框_365体育备用网址官网资讯

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性同意你规定元素边框的样式、宽度和颜色。

CSS 边框

HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们能够创建出效果出色的边框,并且能够应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面:宽度、样式,以及颜色。在下面的篇幅,我们会为您详细讲解这三个方面。

边框与背景

CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距,而不是边框。以后 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数扫瞄器都遵循 CSS2.1 定义,不过一些较老的扫瞄器可能会有不同的体现。

边框的样式

样式是边框最重要的一个方面,这不是因为样式操纵着边框的显示(当然,样式确实操纵着边框的显示),而是因为如果没有样式,将基本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。

例如,您能够为把一幅大红鹰资讯端下载的边框定义为 outset,使之看上去像是“凸起按钮”:

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

定义多种样式

您能够为一个边框定义多个样式,例如:

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

上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采纳了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式

如果您希望为元素框的某一个边设置边框样式,而不是设置一切 4 个边的边框样式,能够使用下面的单边边框样式属性:

因此这两种方法是等价的:

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

注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。

边框的宽度

您能够通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法:能够指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。

注释:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。

所以,我们能够这样设置边框的宽度:

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;}

您也能够通过下列属性分别设置边框各边的宽度:

因此,下面的规则与上面的例子是等价的:

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。边框消逝了,365体育备用网址呢?

这是因为如果边框样式为 none,即边框基本不存在,那么边框就不可能有宽度,因此边框宽度主动设置为 0,而不论您原先定义的是什么。

记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的失误。依据以下规则,一切 h1 元素都不会有任何边框,更不用说 20 像素宽了:

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。

定义单边颜色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:

要为 h1 元素指定实线黑色边框,而右边框为实线红色,能够这样指定:

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

透明边框

我们刚才讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

我们为上面的链接定义了如下样式:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

如需察看以上样式的效果,请点击:PHP?filename=csse_border_color_transparent">TIY。

从某种意义上说,使用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时刻使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。

重要事项:在 IE7 之前,IE/WIN 没有提供对 transparent 的撑腰。在以前的版本,IE 会依据元素的 color 值来设置边框颜色。

CSS 边框实例:

一切边框属性在一个声明之中
本例演示用简写属性来将一切四个边框属性设置于同一声明中。
设置四边框样式
本例演示如何设置四边框样式。
设置每一边的不同边框
本例演示如何在元素的各边设置不同的边框。
一切边框宽度属性在一个声明之中
本例演示用简写属性来将一切边框宽度属性设置于同一声明中。
设置四个边框的颜色
本例演示如何设置四个边框的颜色。能够设置一到四个颜色。
一切下边框属性在一个声明中
本例演示用简写属性来将一切下边框属性设置在同一声明中。
设置下边框的颜色
本例演示如何设置下边框的颜色。
设置下边框的样式
本例演示如何设置下边框的样式。
设置下边框的宽度
本例演示如何设置下边框的宽度。
一切左边框属性在一个声明之中
一切左边框属性在一个声明之中
设置左边框的颜色
本例演示如何设置左边框的颜色。
设置左边框的样式
本例演示如何设置左边框的样式。
设置左边框的宽度
本例演示如何设置左边框的宽度。
一切右边框属性在一个声明之中
本例演示一个简写属性,用于把一切右边框属性设置在一条声明中。
设置右边框的颜色
本例演示如何设置右边框的颜色。
设置右边框的样式
本例演示如何设置右边框的样式。
设置右边框的宽度
本例演示如何设置右边框的宽度。
一切上边框属性在一个声明之中
本例演示用简写属性来将一切上边框属性设置于同一声明之中。
设置上边框的颜色
本例演示如何设置上边框的颜色。
设置上边框的样式
本例演示如何设置上边框的样式。
设置上边框的宽度
本例演示如何设置上边框的宽度。

CSS 边框属性

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

公布评论 (110人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换大红鹰资讯端下载
最新评论