边框颜色
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格式文件。代码如下。(2)在浏览器中浏览效果
在浏览器中浏览效果如图所示。
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:
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格式文件。代码如下。(2)在浏览器中浏览效果
在浏览器中浏览效果如图所示。
透明边框
CSS2 引入了边框颜色值 transparent,这个值用于创建有宽度的不可见边框。
透明样式的定义如下:
a:link, a:visited
{border-style: solid;
border-width: 5px;
border-color: transparent;}
a:hover{border-color: blue;}
利用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。
我在代码中加入了背景属性得到以下显示。
閱讀更多 web前端小芬 的文章