CSS border-bottom-color 属性用于指定元素下边框的颜色。
首先你需要定义 border-style 或者 border-bottom-style 属性，因为在你改变颜色之前元素必须有边框。
底部边框颜色也可以使用 border-color 速记属性来定义。
| 初始值 | 当前颜色 |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 不可继承 |
| 可动画的 | 边框底部的颜色可以设置动画。 |
| 版本 | CSS1. |
| DOM 语法 | object.style.borderBottomColor=“blue”； |
语法
border-bottom-color: color | transparent | initial | inherit;
border-bottom-color 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2> 带有纯蓝色底部边框的标题</h2>
</body>
</html>
border-bottom-color 属性示例
将颜色添加到不同的 HTML 元素以显示颜色效果：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: groove;
border-bottom-color: #8ebf42;
border-bottom-width: 5px;
}
div {
border-style: inset;
border-bottom-color: #ccc;
border-bottom-width: 8px;
}
p {
border-style: double;
border-bottom-color: #1c87c9;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>带有凹槽绿色底部边框的标题。</h2>
<div>带有灰色底部边框的 div 元素。</div>
<p>带有双蓝色边框的段落。</p>
</body>
</html>
具有“透明”值的 border-bottom-color 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>透明边框底色示例</h2>
<div>这是具有透明边框底色的div元素的示例。</div>
</body>
</html>
我们可以将十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称设置为 border-bottom-color 属性的值。
带有 "color" 值的 border-bottom-color 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-bottom-color: lightblue;
}
.hex {
border-bottom-color: #1c87c9;
}
.rgb {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-bottom-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class=“name”>具有指定颜色的下边框</p>
<p class=“hex”>带有十六进制值的下边框</p>
<p class=“rgb”>带有rgb颜色值的下边框</p>
<p class=“hsl”>具有hsl颜色值的下边框</p>
</body>
</html>
| 值 | 说明 |
|---|---|
| color | 指示下边框颜色。默认颜色是元素的颜色。可以使用颜色名称、十六进制颜色代码、rgb（）、rgba（）、hsl（）、hsla（）。所需值。 |
| transparent | 指示边框颜色应为透明。下边框仍将占用边框宽度值定义的空间。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:17 来源：oir作者：oir