border-width
試一試
border-width: thick;
border-width: 1em;
border-width: 4px 1.25em;
border-width: 2ex 1.25ex 0.5ex;
border-width: 0 4px 8px 12px;
<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 屬性的簡寫：
語法
css
/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;
/* <length> values */
border-width: 4px;
border-width: 1.2rem;
/* top and bottom | left and right */
border-width: 2px 1.5em;
/* top | left and right | bottom */
border-width: 1px 2em 1.5cm;
/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;
/* Global values */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;
border-width 屬性可以指定一個、兩個、三個或四個值。
- 當指定一個值時，它將相同的寬度應用於所有四個邊。
- 當指定兩個值時，第一個寬度應用於頂部和底部，第二個寬度應用於左側和右側。
- 當指定三個值時，第一個寬度應用於頂部，第二個寬度應用於左側和右側，第三個寬度應用於底部。
- 當指定四個值時，寬度按頂部、右側、底部和左側的順序（順時針）應用。
值
<line-width>-
定義邊框的寬度，可以是明確的非負
<length>，也可以是關鍵詞。如果是關鍵詞，它必須是以下值之一：thinmediumthick
注意：由於規範並未定義每個關鍵詞表示的確切厚度，因此使用它們時，具體結果取決於實現。然而，它們總是遵循 thin ≤ medium ≤ thick 的模式，並且在單個文件中，這些值是恆定的。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter。 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性 |
正式語法
border-width =
<'border-top-width'>{1,4}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
示例
值和長度的組合
HTML
html
<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
two different values: 2px wide top and bottom border, 10px wide right and left
border
</p>
<p id="three-values">
three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
four different values: "thin" top, "medium" right, "thick" bottom, and 1em
left
</p>
CSS
css
#one-value {
border: ridge #cccccc;
border-width: 6px;
}
#two-values {
border: solid red;
border-width: 2px 10px;
}
#three-values {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#four-values {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
瀏覽器相容性
載入中…
另見
- 與邊框相關的簡寫屬性：
border、border-style、border-color - 與邊框寬度相關的屬性：
border-bottom-width、border-left-width、border-right-width、border-top-width