CSS border-top-width 属性值说明
| 值 | 描述 |
|---|---|
| medium | 定义中上边框。它是此属性的默认值。 |
| thin | 定义薄上边框。确切的宽度由用户代理决定。 |
| thick | 定义厚上边框。确切的宽度由用户代理决定。 |
| length | 定义上边框的厚度和长度。例如，10px、5em、8pt等。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
border-top-width 属性用于定义元素上边框的宽度。
顶部边框以及所有其他边框边的宽度可以使用 border 或者 border-width 速记属性来定义。
要设置 border-top-width，我们应该首先定义 border-style 属性，因为在设置其宽度之前需要边框。
我们可以使用 border-style 或者 border-top-style 来指定边框的样式。
该规范没有定义每个关键字的确切厚度。
但是，它们始终具有以下顺序：thin ≤ medium ≤ thick。
该规范没有定义不同样式和宽度的边框如何在角落中连接。
| 初始值 | medium |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 不可继承 |
| 可动画的 | 边框的宽度可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderTopWidth=“5px”； |
语法
border-top-width: medium | thin | thick | length | initial | inherit;
border-top-width 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
border-style: dotted;
border-top-width: thick;
}
</style>
</head>
<body>
<h2>Border-top-width example</h2>
<p>As you can see the width of the top border is set to thick.</p>
</body>
</html>
具有所有值的 border-top-width 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-width example classes */
.b1 {
border-top-width: medium;
}
.b2 {
border-top-width: thin;
}
.b3 {
border-top-width: thick;
}
.b4 {
border-top-width: 10px;
}
.b5 {
border-top-width: initial;
}
.b6 {
border-top-width: inherit;
}
</style>
</head>
<body>
<h1>Border-top-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px lenght
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>
日期：2020-06-02 22:14:20 来源：oir作者：oir