text-decoration-thickness
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年3月.
* Some parts of this feature may have varying levels of support.
CSS 属性 text-decoration-thickness 用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触粗细。
尝试一下
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">困惑轻吻我的脸颊，留下苦涩中带着甜蜜的滋味</p>
</section>
p {
font: 1.5em sans-serif;
text-decoration-color: red;
}
语法
css
/* 单关键字 */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* 长度 */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;
/* 百分比 */
text-decoration-thickness: 10%;
/* 全局值 */
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 |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| Percentages | refer to the font size of the element itself |
| 计算值 | as specified |
| 动画类型 | 按计算值的类型 |
形式语法
text-decoration-thickness =
auto |
from-font |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
粗细变化
HTML
html
<p class="thin">这里的文字具有 1px 的红色下划线。</p>
<p class="thick">这里的文字具有 5px 的红色下划线。</p>
<p class="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;
}
结果
规范
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-thickness-property |
备注：
此属性曾经称为 text-decoration-width，但在 2019 年更新为 text-decoration-thickness。
浏览器兼容性
Loading…