语法
border-width: medium | thin | thick | length | initial | inherit;
边框宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>将段落边框设置为1px</p>
</body>
</html>
具有三个值的 border-width 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
</style>
</head>
<body>
<p class="thin">段落边框宽度1px</p>
<p class="medium">段落边框宽度设置为medium</p>
<p class="thick">段落边框宽度10px</p>
</body>
</html>
CSS border-width 属性值说明
| 值 | 说明 |
|---|---|
| medium | 定义一个中等边框。这是默认值。 |
| thin | 定义一个细边框。 |
| thick | 定义一个厚边框。 |
| length | 定义边框的厚度。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS border-width 属性设置元素边框所有四个边的宽度。
它是一个速记属性，它指定：
- border-top-width，它定义了元素上边框的宽度。
- border-left-width，它定义了元素左边框的宽度。
- border-right-width，它定义了元素右边框的宽度。
- border-bottom-width，它定义了元素底部边框的宽度。
此属性有四个值。
当使用一个值时，border-width 值将应用于元素的所有四个边（即上、右、下、左）。
如果使用两个值，第一个值将应用于元素的顶部和底部。
第二个值将应用于元素的左侧和右侧。
如果使用三个值，第一个值将应用于元素的顶部。
第二个值将应用于元素的右侧和左侧。
第三个值将应用于元素的底部。
当使用四个值时，第一个值将应用于元素的顶部。
第二个值将应用于元素的右侧。
第三个值将应用于元素的底部。
第四个值将应用于元素的左侧。
首先你应该定义边框样式属性然后边框宽度属性。
元素必须有边框才能设置宽度。
| 初始值 | medium |
|---|---|
| 继承 | 不可继承 |
| 可动画的 | 边框的宽度可以设置动画。 |
| 版本 | CSS1 |
| JavaScript Syntax | object.style.borderWidth=“1px 5px”； |
日期：2020-06-02 22:14:20 来源：oir作者：oir