試一試
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。