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。
浏览器兼容性
加载中…