首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

上边框宽度 | border-top-width

border-top-width CSS属性设置一个框的顶部边框的宽度。

代码语言:javascript
复制
/* Keyword values */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

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

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

初始值

medium

适用元素

all elements. It also applies to ::first-letter.

是否是继承属性

no

适用媒体

visual

计算值

the absolute length or 0 if border-top-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,价值在一个单一的文件中是不变的。

正式语法

代码语言:javascript
复制
<br-width>where 
<br-width> = <length> | thin | medium | thick

示例

HTML

代码语言:javascript
复制
<div>Element 1</div>
<div>Element 2</div>

CSS

代码语言:javascript
复制
div { 
  border: 1px solid red;
  margin: 1em 0;
}

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

结果

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 3The definition of 'border-top-width' in that specification.

Candidate Recommendation

No significant change.

CSS Level 2 (Revision 1)The definition of 'border-top-width' in that specification.

Recommendation

No significant change.

CSS Level 1The definition of 'border-top-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.3

?

(Yes)

1

6

11

1

另见

  • 其他的border-width相关的CSS属性:border-left-widthborder-right-widthborder-bottom-width,和border-width
  • 其他border-top相关CSS属性:borderborder-topborder-top-style,和border-top-color

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com