HTML之CSS (Border)边框<二>(边框颜色)

边框颜色

border-color属性用于设置边框的颜色,它一次可以接受最多 4 个颜色值。可以设置的颜色:

  • name - 指定颜色的名称,如 "yellow"
  • RGB - 指定 RGB 值, 如 "yellow(255,255,0)"
  • Hex - 指定16进制值, 如 "#ffff00"

您还可以设置边框的颜色为"transparent"。

注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

p.one

{border-style: solid;

border-color: yellow;}

p.two

{border-style: dotted;

border-color: #0000ff;}

打开记事本,在

标签中加入以下代码,并保存为HTML格式文件。代码如下。


HTML之CSS (Border)边框<二>(边框颜色)

(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。


HTML之CSS (Border)边框<二>(边框颜色)


定义单边颜色

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

p.one

{border-style: solid;

border-top-color: yellow;}

p.two

{border-style: dotted;

border-top-color: pink ;

border-right-color: red;

border-bottom-color: blue;

border-left-color: orange;}

打开记事本,在

标签中加入以下代码,并保存为HTML格式文件。代码如下。


HTML之CSS (Border)边框<二>(边框颜色)

(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。


HTML之CSS (Border)边框<二>(边框颜色)

透明边框

CSS2 引入了边框颜色值 transparent,这个值用于创建有宽度的不可见边框。

透明样式的定义如下:

a:link, a:visited

{border-style: solid;

border-width: 5px;

border-color: transparent;}

a:hover{border-color: blue;}

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

我在代码中加入了背景属性得到以下显示。


HTML之CSS (Border)边框<二>(边框颜色)


分享到:


相關文章: