CSS6



透明边框

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

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

如需查看以上样式的效果，请点击：TIY。

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

重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

CSS 边框实例：

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

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

设置四边框样式

本例演示如何设置四边框样式。

设置每一边的不同边框

本例演示如何在元素的各边设置不同的边框。

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

本例演示用简写属性来将所有边框宽度属性设置于同一声明中。

设置四个边框的颜色

本例演示如何设置四个边框的颜色。可以设置一到四个颜色。

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

本例演示用简写属性来将所有下边框属性设置在同一声明中。

设置下边框的颜色

本例演示如何设置下边框的颜色。

设置下边框的样式

本例演示如何设置下边框的样式。

设置下边框的宽度

本例演示如何设置下边框的宽度。

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

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

设置左边框的颜色

本例演示如何设置左边框的颜色。

设置左边框的样式

本例演示如何设置左边框的样式。

设置左边框的宽度

本例演示如何设置左边框的宽度。

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

本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。

设置右边框的颜色

本例演示如何设置右边框的颜色。

设置右边框的样式

本例演示如何设置右边框的样式。

设置右边框的宽度

本例演示如何设置右边框的宽度。

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

本例演示用简写属性来将所有上边框属性设置于同一声明之中。