CSS-边框底部宽度 | 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-widthborder-right-widthborder-top-width,和border-width
  • 另外底部边框相关的CSS属性:borderborder-bottomborder-bottom-style,和border-bottom-color
相关文章
|
26天前
|
前端开发
css解决li边框重合问题
css解决li边框重合问题
13 0
|
3月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
26 3
|
3月前
|
前端开发
|
6月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
1天前
|
前端开发 开发者
CSS3的常见边框汇总
CSS3的常见边框汇总
9 2
|
1月前
|
前端开发
CSS关于默认宽度
CSS关于默认宽度
|
1月前
|
前端开发
css边框border(含代码,易懂)
css边框border(含代码,易懂)
|
2月前
css3边框与圆角
css3边框与圆角
30 0
|
3月前
|
前端开发
CSS 做三角边框,实现及原理
CSS 做三角边框,实现及原理
42 0
|
4月前
|
前端开发 JavaScript 容器
纯css实现高度或者宽度变化字体发生变化【容器查询】
纯css实现高度或者宽度变化字体发生变化【容器查询】
57 0