语法
border-bottom-width: medium | thin | thick | length | initial | inherit;
边框底部宽度属性的示例:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
使用 border-bottom-width 属性来设置该元素的下边框宽度。
</p>
</body>
</html>
具有“medium”值的 border-bottom-width 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>具有中等底部边框的标题。</h2>
<div>具有中等底部边框的 div 元素。</div>
</body>
</html>
显示 "thin" 和 "thick" 值之间差异的 border-bottom-width 属性示例:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>带有细底边框的标题</h2>
<div>带有粗底边框的 div 元素。</div>
</body>
</html>
border-bottom-width 属性设置底部边框的宽度。
我们需要在 border-bottom-width 属性之前设置 border-style 或者 border-bottom-style 属性。
首先,我们需要有边框,然后才能更改宽度。
规范没有设置每个关键字设置的确切厚度,使用其中之一时的精确结果是特定于实现的。
但它们总是遵循薄 ≤ 中 ≤ 厚的模式,并且值在单个文档中是恒定的。
| 初始值 | medium |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 宽度可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderBottomWidth=“5px”; |
CSS border-bottom-width 属性值说明
| 值 | 说明 |
|---|---|
| medium | 设置中底边框。它是默认值。 |
| thin | 设置细底边框。 |
| thick | 设置厚底边框。 |
| length | 借助于此,我们可以设置底部边框的厚度。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期:2020-06-02 22:14:17 来源:oir作者:oir
