控制边框颜色：《CSS3 Border-color》

CSS3中有关于Border的属性一共有三个:圆角border-radius,图片边框border-images,边框多颜色border-color,其中圆角border-radius是经常使用的一个属性，并且如今不少网站制做圆角效果都使用border-radius来实现;

在CSS2中，咱们能够把border-color同时应用到不一样的边框上，也能够分别在各边上色，如：

 

border-color: <color>/*其中能够上一个值，也能够是多个值，具体我在这里很少说了，你们来时用到的也特别多*/ /*咱们能够分别给各边上色*/ border-top-color: <color>/*给上边框上色*/ border-right-color: <color> /*给右边框上色*/ border-bottom-color:<color> /*给下边框上色*/ border-left-color: <color> /*给左框上色*/

 上面展现的是给元素边框上色的方法，你们都知道这样能够给边框上惟一色。但是若是咱们想给边框添加不一样的颜色，好比说给边框添加一个渐变色，或者说一个彩色，那么咱们前面的方法就无能为力了，那怎么办呢?为了达到这样的效果，CSS3就推出了其本身的border-color属性，不过到目前为止只有Firefox 3.0+的浏览支持这个属性。也是由于这一点，css3的border-color应用是至关的少，据个人了解，目前尚未发现有项目应用css3的border-color来实现边框特殊效果。但这一点都不会影响咱们这些css3的爱好者学习css3各类属性的热情。下面咱们就继续，看看css3的bborder-color是如何使用。

前面咱们说过CSS3的border-color目前只有Mozilla的Firefox3.0+浏览器支持，因此咱们有必要在前面加上其前缀“-moz-”。如今咱们来看看其语法的书写规则

 

 -moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/ -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/ -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/ -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/ 

 从上面的语法规则来看，咱们把元素四边分开了书写，但这里有一点和CSS2的不一样之处，在CSS3中咱们使用的是border-top-colors,border-right-colors,border-bottom-colors,border-left-colors，当中的colors是个复数，而在CSS2中都是border-top-color,border-right-color,border-bottom-color,border-left-color。这一点你们必定要记住了，在CSS3中是“colors”由于咱们是应用多色。这里你们必定会问，咱们假如在各边应用的颜色相同时，能不能不分开写呢？直接写成：

 

-moz-border-colors: <color> <color> <color> <color>*;/*这样缩写能行吗？*/

 针对这点，我要大声的告诉你们，上面的写法是错误的，咱们不能像css2中的border-color这样缩写。若是缩写的话，是没有任何效果的。但愿你们要记住这个不一样之处，以避免形成没有任何效果显示。

上面咱们介绍了CSS3的border-color与CSS2中的border-color在语法上的不一样之处，下面咱们接着来看看其取值上的不一样之处。

使用css3的border-color属性时，若是你的boder宽度设置了X px,那么你能够在这个边框上使用X种颜色，此时每个颜色就是一个px。若是你的border宽度设置了10px，而你只运用了三四个颜色，那么最后一个颜色将会填充到后面的宽度上。

下面咱们来看一个简单的实例：

 

.demo { width: 200px; height: 100px; border: 5px solid transparent; -moz-border-top-colors: red blue white white black; -moz-border-right-colors: red blue white white black; -moz-border-bottom-colors: red blue white white black; -moz-border-left-colors: red blue white white black; }

 效果以下所示：

咱们还能够利用这个属性制做渐变的边框效果

 

.demo1 { width: 200px; height: 100px; border: 10px solid transparent; border-radius: 15px 0 15px 0; -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303; }

 效果以下图所示：

CSS3中的border-color相对于前面介绍的CSS3属性来讲比较简单点，因此今天也简单介绍了一下其使用的方法，以及取值的细节之处。最后在提醒你们一点，到目前只有Firefox3.0版本以上的浏览器才能支持，因此此属性的应用范围相对来讲不多，几乎来讲没什么地方使用。若是只是学习的话，仍是能够试试效果。若是须要应用到项目中的话，仍是时机不成熟。那么今天我就介绍到这里了.