试一试
border-bottom-width: thick;
border-bottom-width: 2em;
border-bottom-width: 4px;
border-bottom-width: 2ex;
border-bottom-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: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
语法
css
/* 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: revert;
border-bottom-width: revert-layer;
border-bottom-width: unset;
值
<line-width>-
定义边框的宽度，可以是明确的非负
<length>，也可以是关键词。如果是关键词，它必须是以下值之一：thinmediumthick
注意：由于规范并未定义每个关键词表示的确切厚度，因此使用它们时，具体结果取决于实现。然而，它们总是遵循 thin ≤ medium ≤ thick 的模式，并且在单个文档中，这些值是恒定的。
正式定义
| 初始值 | medium |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter。 |
| 继承性 | 否 |
| 计算值 | 如果border-bottom-style是none或hidden，则为绝对长度或0 |
| 动画类型 | 一个长度 |
正式语法
border-bottom-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-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
结果
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
浏览器兼容性
加载中…
另见
- 其他与 border-width 相关的 CSS 属性：
border-left-width、border-right-width、border-top-width和border-width。 - 其他与 border-bottom 相关的 CSS 属性：
border、border-bottom、border-bottom-style和border-bottom-color。