CSS border-left-width 属性值说明
| 值 | 说明 |
|---|---|
| medium | 定义中等左边框。它是此属性的默认值。 |
| thin | 定义左细边框。确切的宽度由用户代理决定。 |
| thick | 定义粗左边框。确切的宽度由用户代理决定。 |
| length | 定义左边框的厚度和长度。例如，10px、5em、8pt等。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
border-left-width 属性用于定义元素左边框的宽度。
左边框以及所有其他边框边的宽度也可以使用 border 或者 border-width 速记属性来定义。
要设置 border-left-width，我们应该首先定义 border-style 属性，因为在设置其宽度之前需要边框。
我们可以使用 border-left-style 或者 border-style CSS 属性来定义边框样式。
该规范没有定义每个关键字的确切厚度。
但是，它们始终遵循以下顺序：thin ≤ medium ≤ thick。
该规范没有定义不同宽度和样式的边框如何在角落中连接。
| 初始值 | medium |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 边框的宽度可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderLeftWidth=“4px”； |
语法
border-left-width: medium | thin | thick | length | initial | inherit;
具有 "thick" 值的 border-left-width 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
border-style: dashed;
border-left-width: thick;
}
</style>
</head>
<body>
<h2>border-left-width左边框宽度设置示例</h2>
<p>左边框的宽度设置为粗。</p>
</body>
</html>
具有所有值的 border-left-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-left-width example classes */
.b1 {
border-left-width: medium;
}
.b2 {
border-left-width: thin;
}
.b3 {
border-left-width: thick;
}
.b4 {
border-left-width: 10px;
}
.b5 {
border-left-width: initial;
}
.b6 {
border-left-width: inherit;
}
</style>
</head>
<body>
<h1>Border-left-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 length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>
日期：2020-06-02 22:14:18 来源：oir作者：oir