CSS
背景和边框 | Backgrounds & Borders

上边框宽度 | border-top-width

border-top-width

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

/* 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 typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

thinA thin border
mediumA medium border
thickA 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-top-width: thick; } div:nth-child(2) { border-top-width: 2em; }

结果

规范

SpecificationStatusComment
CSS Backgrounds and Borders Module Level 3The definition of 'border-top-width' in that specification.Candidate RecommendationNo significant change.
CSS Level 2 (Revision 1)The definition of 'border-top-width' in that specification.RecommendationNo significant change.
CSS Level 1The definition of 'border-top-width' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support1(Yes)143.51

FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support2.3?(Yes)16111

另见

  • 其他的border-width相关的CSS属性:border-left-widthborder-right-widthborder-bottom-width,和border-width

  • 其他border-top相关CSS属性:borderborder-topborder-top-style,和border-top-color