text-decoration-thickness
Baseline 廣泛可用 *
text-decoration-thickness CSS 屬性設定元素中文字裝飾線（例如刪除線、下劃線或上劃線）的粗細。
試一試
text-decoration-line: underline;
text-decoration-thickness: 3px;
text-decoration-line: line-through;
text-decoration-thickness: 0.4rem;
text-decoration-line: underline overline;
text-decoration-thickness: from-font;
font-size: 2rem;
<section id="default-example">
<p id="example-element">
Confusion kissed me on the cheek, and left a taste so bittersweet
</p>
</section>
p {
font: 1.5em sans-serif;
text-decoration-color: red;
}
語法
css
/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;
/* percentage */
text-decoration-thickness: 10%;
/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;
值
auto-
瀏覽器會為文字裝飾線選擇一個合適的寬度。
from-font-
如果字型檔案包含首選粗細資訊，則使用該值。如果字型檔案不包含此資訊，則行為與設定
auto相同，由瀏覽器選擇合適的粗細。 <length>-
將文字裝飾線的粗細指定為
<length>，這會覆蓋字型檔案建議或瀏覽器預設值。 <percentage>-
將文字裝飾線的粗細指定為當前字型中 1em 的
<percentage>。百分比作為相對值繼承，因此會隨字型變化而縮放。瀏覽器必須使用至少 1 個裝置畫素。對於此屬性的給定應用，即使子元素具有不同的字型大小，粗細在它所應用到的整個框中也是恆定的。
正式定義
| 初始值 | auto |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 百分比 | 參考元素本身的字型大小 |
| 計算值 | 同指定值 |
| 動畫型別 | 按計算值型別 |
正式語法
text-decoration-thickness =
auto |
from-font |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
不同的粗細
HTML
html
<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>
CSS
css
.thin {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 1px;
}
.thick {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
.shorthand {
text-decoration: underline solid red 5px;
}
結果
規範
| 規範 |
|---|
| CSS 文字裝飾模組第 4 級 # text-decoration-thickness 屬性 |
注意： 該屬性以前稱為 text-decoration-width，但在 2019 年更新為 text-decoration-thickness。
瀏覽器相容性
載入中…