边框底部宽度 | border-bottom-width

border-bottom-width

CSS属性 border-bottom-width 设置一个元素的底部边框宽度。

/* Keyword values */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/* <length> values */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/* Global keywords */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;

初始值	medium
适用元素	all elements. It also applies to ::first-letter.
是否是继承属性	no
适用媒体	visual
计算值	the absolute length or 0 if border-bottom-style is none or hidden
Animation type	a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

< br-width>定义边界的宽度，可以是明确的非负值<length>或关键字。如果是关键字，则必须是以下值之一：

thin		A thin border
medium		A medium border
thick		A thick border

注意：由于规范没有定义每个关键字所表示的精确厚度，因此使用其中一个关键字的精确结果是特定于实现的。尽管如此，它们总是遵循这个模式thin ≤ medium ≤ thick，价值在一个单一的文件中是不变的。

正式语法

<br-width>where 
<br-width> = <length> | thin | medium | thick

示例

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div { 
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-bottom-width' in that specification.	Candidate Recommendation	No significant change.
CSS Level 2 (Revision 1)The definition of 'border-bottom-width' in that specification.	Recommendation	No significant change.
CSS Level 1The definition of 'border-bottom-width' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.0)	4.0	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.3	(Yes)	1.0 (1.0)	6.0	11	1.0

另见

其他的与border-width相关的CSS属性：border-left-width，border-right-width，border-top-width，和border-width。

另外底部边框相关的CSS属性：border，border-bottom，border-bottom-style，和border-bottom-color。