border-top-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
css 属性 border-top-width 是用于设置盒模型的上边框的宽度
尝试一下
border-top-width: thick; border-top-width: 2em; border-top-width: 4px; border-top-width: 2ex; border-top-width: 0; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> #example-element { background-color: palegreen; color: #000; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px; } Syntax
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; Values
<br-width>-
上边框的宽度属性的有效值要么是一个具体的非负数，要么是一个关键字。如果是关键字，必须是一下几种：
thinA thin border mediumA medium border thickA thick border 备注：Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern
thin ≤ medium ≤ thick, and the values are constant within a single document.
Formal syntax
border-top-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Example
HTML
html
<div>Element 1</div> <div>Element 2</div> CSS
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; } Result
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
| 初始值 | medium |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 计算值 | 绝对长度；或如果 border-top-style 的值为 none 或 hidden，则为 0 |
| 动画类型 | a length |
Browser compatibility
See also
- The other border-width-related CSS properties:
border-left-width,border-right-width,border-bottom-width, andborder-width. - The other border-top-related CSS properties:
border,border-top,border-top-style, andborder-top-color.