当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | border-color

CSS属性参考 | border-color

2016-05-13

border-color属性是用于设置一个元素的上右下左4个边框颜色的简写属性。border-color属性可以同时设置一个元素的border-left-colorborder-right-colorborder-top-colorborder-bottom-color属性。

border-color属性的值可以是1个、2个、3个或4个。

如果为border-color属性设置一个值,那么上下左右4条边的颜色都使用这个值来指定的颜色。

如果为border-color属性设置两个值,那么第一个值指定上下两条边的颜色,第二个值指定左右两条边的颜色。

如果为border-color属性设置三个值,那么第一个值指定上边框的颜色,第二个值指定左右两条边框的颜色,第三个值指定下边框的颜色。

如果为border-color属性指定4个值,那么这4个值分别按上、右、下、左的顺序为各条边框指定颜色。

官方语法
border-color: <color>{1,4}
                            

参数:

  • <color>:有效的CSS颜色值。参考<color>数据类型的说明。

border-color属性的初始值为它包含的各条边框的边框颜色的初始值:

border-color属性可以使用inherit关键字来继承其父元素边框的颜色。

应用范围

border-color属性可以应用在所有的元素上。

示例代码

下面是border-color属性取值的示例代码:

/* border-color: color; 单值语法 */ 
border-color: red;

/* border-color: 上下 左右 双值语法*/
border-color: red #f015ca;

/* border-color: 上 左右 下  三值语法 */
border-color: red yellow green;

/* border-color: 上 右 下 左  四值语法 */
border-color: red yellow green blue;

border-color: inherit                           
                            
在线演示

下面的例子使用border-color属性为元素设置不同的边框颜色。

.container{
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  height: 350px;
  border-style: solid;
  border-width: 30px;
  border-color: #e93e30 #52b529 #f8c63d #377ef0;
}                              
                            

下载源代码

浏览器支持

所有的现代浏览器都支持border-color属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。

相关阅读
Previous:
上一篇:CSS属性参考 | border-width
Next:
下一篇:CSS属性参考 | border-style

我要评论

返回顶部