边框宽度 | border-width
border-width
border-width属性是对元素边框的四个侧面设置宽度的速记属性：border-top-width，border-right-width，border-bottom-width，和border-left-width。
/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;
/* <length> values */border-width: 4px;
border-width: 1.2rem;
/* vertical | horizontal */
border-width: 2px 1.5em;
/* top | horizontal | bottom */
border-width: 1px 2em 1.5cm;
/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;
/* Global keywords */
border-width: inherit;
border-width: initial;
border-width: unset;
| 初始值 | as each of the properties of the shorthand: border-top-width: medium border-right-width: medium border-bottom-width: medium border-left-width: medium |
|---|---|
| 适用元素 | all elements. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| 适用媒体 | visual |
| 计算值 | as each of the properties of the shorthand: border-bottom-width: the absolute length or 0 if border-bottom-style is none or hidden border-left-width: the absolute length or 0 if border-left-style is none or hidden border-right-width: the absolute length or 0 if border-right-style is none or hidden border-top-width: the absolute length or 0 if border-top-style is none or hidden |
| Animation type | as each of the properties of the shorthand: border-bottom-width: a length border-left-width: a length border-right-width: a length border-top-width: a length |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
border-top-width：medium
border-right-width：medium
border-bottom-width：medium
border-left-width：medium
Applies to all elements. It also applies to [`::first-letter`](::first-letter). [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
border-bottom-width：绝对长度或0如果border-bottom-style是none或hidden
border-left-width：绝对长度或0如果border-left-style是none或hidden
border-right-width：绝对长度或0如果border-right-style是none或hidden
border-top-width：绝对长度或0如果border-top-style是none或hidden
Animation type as each of the properties of the shorthand:
border-bottom-width：长度
border-left-width：长度
border-right-width：长度
border-top-width：长度
Canonical order the unique non-ambiguous order defined by the formal grammar
语法
该border-width属性可以使用一个，两个，三个或四个值来指定。
- 当指定
一个值时，它将在所有四条边上应用相同的宽度。
- 当指定
两个值时，第一个宽度适用于顶部和底部，第二个适用于左侧和右侧。
- 当指定
三个值时，第一个宽度适用于顶部，第二个适用于左侧，第三个适用于底部。
- 当指定
四个值时，宽度按顺序应用于顶部，右侧，底部和左侧（顺时针）。
值
<br-width>定义边界的宽度，可以是明确的非负值<length>或关键字。如果是关键字，则必须是以下值之一：
| thin | | A thin border |
|---|---|---|
| medium | | A medium border |
| thick | | A thick border |
注意：由于规范没有定义每个关键字所表示的精确厚度，因此使用其中一个关键字的精确结果是特定于实现的。尽管如此，它们总是遵循这个模式thin ≤ medium ≤ thick，价值在一个单一的文件中是不变的。
正式语法
<br-width>{1,4}where
<br-width> = <length> | thin | medium | thick
示例
值和长度的混合
HTML
<p id="sval">
one value: 6px wide border on all 4 sides</p>
<p id="bival">
two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">
three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">
four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
CSS
#sval {
border: ridge #ccc;
border-width: 6px;
}
#bival {
border: solid red;
border-width: 2px 10px;
}
#treval {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#fourval {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3The definition of 'border-width' in that specification. | Candidate Recommendation | No direct change, the <length> CSS data type extension has an effect on this property. |
| CSS Level 2 (Revision 1)The definition of 'border-width' in that specification. | Recommendation | Added the constraint that values' meaning must be constant inside a document. |
| CSS Level 1The definition of 'border-width' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | 1 | (Yes) | 1 | 4 | 3.5 | 1 |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | 2 | ? | (Yes) | 1 | 6 | 11 | 3 |
另见
- 边界相关的简写属性：
border，border-style，border-color
- 边框宽度相关的属性：
border-bottom-width，border-left-width，border-right-width，border-top-width
