border-bottom 属性是定义底部边框的宽度、样式和颜色的速记属性。
我们可以更改值的位置。
但正确的顺序是设置宽度、样式和边框底部的颜色。
如果我们不定义边框的样式，颜色将不起作用，因为在我们更改元素颜色之前，元素必须有边框。
如果不提宽度，它会自动选择中号。
如果没有指定颜色，它会理解父颜色，如果没有指定样式，它将不起作用。
| 初始值 | medium none 当前颜色 |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 边框底部的颜色和宽度可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderBottom="15px dotted blue"; |
CSS border-bottom 属性值说明
| 值 | 说明 |
|---|---|
| border-bottom-style | 定义下边框的样式。默认值为“none”。 |
| border-bottom-width | 定义下边框的宽度。默认值为“medium”。 |
| border-bottom-color | 定义下边框的颜色。默认值是文本的颜色。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
border-bottom: border-width | border-style | border-color | initial | inherit;
边框底部属性的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>带有凹槽蓝色底部边框的标题。</h2>
</body>
</html>
将 border-bottom 属性与 <h2>、<p> 和 <div> 元素一起使用的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>带有蓝色虚线底部边框的标题。</h2>
<p>带有双绿色底边框的段落。</p>
<div>一个带有灰色脊底边框的 div 元素。</div>
</body>
</html>
日期：2020-06-02 22:14:17 来源：oir作者：oir