CSS border-color 属性值说明
| 值 | 说明 |
|---|---|
| color | 设置边框的颜色。默认颜色是元素的当前颜色。可以使用颜色名称、十六进制颜色代码、rgb（）、rgba（）、hsl（）、hsla（）。所需值。 |
| transparent | 使边框颜色透明。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS border-color 属性是设置元素边框四边颜色的简写。
它是以下属性的简写：
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
每一边都可以有自己的值。
边框颜色属性与边框样式属性一起使用。
如果值为 0，则边框颜色属性无效。
此属性采用任何 CSS 颜色值。
默认颜色是元素的当前颜色。
border-color 属性可以有 4 个值。
如果它只有一个值，则颜色将应用于所有四个边框。
如果有两个值，第一个值设置为上下边框，第二个值设置为左右。
如果它有三个值，第一个应用于顶部边框，第二个应用于左右，第三个应用于底部。
如果它有四个值，第一个设置在顶部，第二个在右边，第三个在底部，第四个在左边。
| 初始值 | 当前颜色 |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 框的边框可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderStyle=“dotted double”； |
语法
border-color: color | transparent | initial | inherit;
这里我们有一个仅应用一个值的示例。
它将为元素的四边设置颜色。
边框颜色border-color属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">蓝色点状边框</div>
</body>
</html>
让我们看另一个例子，其中应用了四个值。
第一个用于顶部边框，第二个用于右侧，第三个用于底部，第四个用于左侧。
具有 4 个值的边框颜色属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">border-color 属性示例</div>
</body>
</html>
我们可以将十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称设置为 border-color 属性的值。
具有“颜色”值的边框颜色属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>
日期：2020-06-02 22:14:18 来源：oir作者：oir