CSS border-width 语法
在 CSS 中，border-width 属性用于单独定义边框的宽度。border-width 一般都是搭配以下 2 个属性一起使用。
语法：
border-width: 关键字 | 长度值;说明：
border-width 属性的取值可以是关键字或长度值。如果是关键字，则取值有 3 种，如下表所示。
| 取值 | 说明 |
|---|---|
| thin | 通常为 1px |
| medium（默认值） | 通常为 3px |
| thick | 通常为 5px |
如果是长度值是数值，可以使用任何合法的 CSS 长度单位，如 px、em、em 等。
border-width 的取值可以是 1 个、2 个、3 个或 4 个值。
- 1 个值：应用于所有四条边（上、右、下、左）。
- 2 个值：第一个值应用于上下边框，第二个值应用于左右边框。
- 3 个值：第一个值应用于上边框，第二个值应用于左右边框，第三个值应用于下边框。
- 4 个值：依次应用于上、右、下、左边框（顺时针方向）。
注意: border-width 属性只有当 border-style 属性的值不是 none 或 hidden 时才会生效。
CSS border-width 摘要
| 属于 | CSS 边框 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | medium（通常为 3px） |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS border-width 示例
接下来，我们通过几个简单的例子来讲解一下 CSS border-width 属性是如何使用的。
示例 1：border-width 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
margin-bottom: 10px;
border-width: 10px;
border-style: solid;
border-color: red;
}
div:nth-of-type(1) { border-width: 2px; }
div:nth-of-type(2) { border-width: 4px; }
div:nth-of-type(3) { border-width: 6px; }
</style>
</head>
<body>
<div>2px</div>
<div>4px</div>
<div>6px</div>
</body>
</html>页面效果如下图所示。
分析：
border-width 属性都是搭配 border-style 和 border-color 这 2 个属性一起使用的。
示例 2：border-width 使用 2 个值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border-width: 2px 4px;
border-style: solid;
border-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
border-width: 2px 4px; 表示设置 “上下边框” 的宽度为 2px，并且设置 “左右边框” 的宽度为 4px。当然了，小伙伴们也可以试一下 border-width 取值为 3 个值、4 个值的情况。
border-width 派生子属性
border-width 其实是一个复合属性，它有 4 个派生子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| border-top-width | 上边框的宽度 |
| border-right-width | 右边框的宽度 |
| border-bottom-width | 下边框的宽度 |
| border-left-width | 左边框的宽度 |
