初探CSS3 - 边框

早在CSS1中就已经定义了 border 属性，使用它可以设置元素的边框风格，包括边框样式，粗细和颜色，使用以下三个值来设置：

border-width //粗细
border-color //颜色
border-style //样式

在实际的使用中我们常常将这三条属性合在一起来书写，如下所示：

border:1px solid #000;

CSS3对border属性进行了增强，主要是在以下几个属性上：

border-color
border-radius
border-image
box-shadow

 border-color

在CSS1和CSS2中，我们可以使用以下方式来单独的为边框设置颜色：

border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-bottom-color:black;

使用以上方式可以为元素的上右下左分别设置边框颜色，但是仅限于设置单色，如果想在同一边框上设置多色或者渐变色就无能为力了。为此，CSS3增强了border-color属性，如下所示：

border-top-colors:red;
border-right-colors:blue;
border-bottom-colors:green;
border-left-colors:black;

和CSS2相比，唯一的不同就是需要使用复数colors，可以像下面这样为同一边框添加多个颜色：

border-top-colors:red blue green;

应用规则是如果边框的粗细数量和颜色数量一样的话则平均使用这些颜色数量，如果边框的粗细数量少于颜色数量则最后一种颜色应用于剩余的粗细数量。例如如果设置边框为10px，而颜色数量只设置了3个，那么前两个颜色会由外至内的各设置1px的宽度，最后8px将会应用第三种颜色。另外，border-colors属性还只支持FireFox3.0+，所以我们需要加上-moz-的前缀，如下所示：

.wrap{
    width:100px;
     height:100px;
     border-width:10px;
     border-style:solid;
     -moz-border-top-colors:green blue yellow;
     -moz-border-right-colors:green blue yellow;
     -moz-border-bottom-colors:green blue yellow;
     -moz-border-left-colors:green blue yellow;
}

效果如下：

在使用border-colors属性的时候，一定要单独为每一条边框指定，不可以使用类似 -moz-border-colors 的缩写，这样指定的规则将无效。由于border-colors仅支持火狐浏览器，所以在实际应用中使用的情况并不多。