CSS border-bottom-style 属性值说明
| 值 | 说明 |
|---|---|
| none | 将不显示边界。默认值。 |
| hidden | 与“none”相同，除了表元素的边界冲突解决。 |
| dotted | 边框指定为一系列点。 |
| dashed | 边框指定为一系列破折号。 |
| solid | 边框指定为实线。 |
| double | 边框指定为双实线。 |
| groove | 这是一个三维槽边界，给人的印象，边界是雕刻。山脊的对面。 |
| ridge | 指定三维脊状边界并提供拉伸外观的效果。槽的对面。 |
| inset | 这是一个三维效果，让人觉得元素似乎嵌入。与开始相反。 |
| outset | 这是一个三维效果，使印象中的元素似乎浮雕。与插图相反。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS border-bottom-style 属性用于指定底部边框元素的样式。
不提及边框底部或者边框属性的样式，边框底部样式将不会出现。
我们需要知道规范没有定义不同样式的边框如何在角落中连接。
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderBottomStyle=“dotted”； |
语法
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
边框底部样式属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: solid;
}
div {
border-bottom-style: dashed;
}
</style>
</head>
<body>
<h2>带有实心底部边框的标题</h2>
<div>带有虚线底部边框的 div 元素。</div>
</body>
</html>
具有多个值的 border-bottom-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: double;
}
p {
border-style: solid;
border-bottom-style: dashed;
}
div {
border-bottom-style: groove;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>带有双底边框的标题</h2>
<p> 带有虚线底部边框的段落。 </p>
<div>带有凹槽底部边框的 div 元素。</div>
</body>
</html>
具有“隐藏”值的 border-bottom-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid black;
border-bottom-style: hidden;
}
</style>
</head>
<body>
<h1>具有边框底部样式属性的示例</h1>
</body>
</html>
带有 "inset" 值的 border-bottom-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid;
border-bottom-style: inset;
}
</style>
</head>
<body>
<h1>具有边框底部样式属性的示例</h1>
</body>
</html>
带有 "outset" 值的 border-bottom-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
text-align: center;
border: 5px solid;
border-bottom-style: outset;
}
</style>
</head>
<body>
<h1>border-bottom-style属性示例</h1>
</body>
</html>
日期：2020-06-02 22:14:17 来源：oir作者：oir