border-top-width
**border-top-width
** CSS 属性设置元素顶边框的宽度。
试试看
语法
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: revert;
border-top-width: revert-layer;
border-top-width: unset;
值
<line-width>
-
定义边框的宽度,可以是显式的非负
<length>
或关键字。如果它是关键字,则必须是以下值之一thin
medium
thick
**注意:** 由于规范没有定义每个关键字所表示的确切厚度,因此使用其中一个关键字时的精确结果是实现特定的。不过,它们始终遵循模式 thin ≤ medium ≤ thick
,并且值在单个文档中是恒定的。
正式定义
初始值 | medium |
---|---|
应用于 | 所有元素。它也适用于 ::first-letter 。 |
继承 | 否 |
计算值 | 绝对长度或 0 (如果 border-top-style 为 none 或 hidden ) |
动画类型 | 长度 |
正式语法
border-top-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
示例
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;
}
结果
规范
规范 |
---|
CSS 背景和边框模块级别 3 # the-border-width |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 其他与边框宽度相关的 CSS 属性:
border-left-width
、border-right-width
、border-bottom-width
和border-width
。 - 其他与顶边框相关的 CSS 属性:
border
、border-top
、border-top-style
和border-top-color
。