text-decoration-thickness
CSS
property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
/* 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: unset;
auto
The browser chooses an appropriate width for the text decoration line.
from-font
auto
was set, with the browser choosing an appropriate thickness.
<length>
<length>
, overriding the font file suggestion or the browser default.
<percentage>
<percentage>
of
1em
in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.
| 初始值 |
auto
|
|---|---|
| 适用于 |
所有元素。它还适用于
::first-letter
and
::first-line
.
|
| 继承 | no |
| 百分比 | refer to the font size of the element itself |
| 计算值 | 如指定 |
| 动画类型 | by computed value type |
auto | from-font | <length> | <percentage>
<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>
.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 Text Decoration Module Level 4
The definition of 'text-decoration-width' in that specification. |
工作草案 | 初始定义。 |
注意
: The property used to be called
text-decoration-width
, but was updated in 2019 to
text-decoration-thickness
.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-thickness
|
Chrome 不支持 No | Edge 不支持 No |
Firefox
完整支持
70
|
IE 不支持 No | Opera 不支持 No | Safari 完整支持 12.1 | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 完整支持 12.2 | Samsung Internet Android 不支持 No |
| percentage values | Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 74 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
用户必须明确启用此特征。
使用非标名称。