定义和用法
border-color
属性用于设置元素四条边框的颜色,此属性可以设置 1 到 4 种颜色值。
border-color
使用时,必须同时设置border-style
属性。
border-color
默认颜色是元素自身的color
值(currentColor),可以使用transparent
创建透明边框,这在布局调整时很有用。
默认值: | 当前元素颜色 |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS1 |
JavaScript 语法: | object.style.borderColor="#FF0000 blue"Demo ❯ |
常用的实例
下面通过设置不同数目的属性值,让你更直观地了解border-color
属性的用法。
1. 为边框颜色设置一个属性值,即【上右下左】均为一个颜色:
div {
border-color: red;
}
2. 为边框颜色设置两个属性值,即【上下 | 左右】分别设置颜色:
div {
border-color: red blue;
}
3. 为边框颜色设置三个属性值,即【上 | 左右 | 下】分别设置颜色:
div {
border-color: red green blue;
}
4. 为边框颜色设置四个属性值,即【上 | 右 | 下 | 左】分别设置颜色:
div {
border-color: red blue green yellow;
}
CSS 语法
border-color: color|transparent|initial|inherit;
属性值
值 | 描述 |
color |
指定边框颜色(默认当前元素颜色)。参阅CSS 颜色值,获取完整的可能颜色值列表。 |
transparent |
指定边框颜色为透明。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持border-color
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注释:Internet Explorer 6(以及更早的版本)不支持属性值 "transparent"。
注释:IE7 以及更早版本的浏览器不支持值 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
25
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈