CSS text-decoration-thickness 属性

定义和用法

text-decoration-thickness 属性规定装饰线的粗细。

另请参阅：

CSS 参考手册：text-decoration 属性

CSS 教程：CSS 文字

实例

为 <h1>、<h2>、<h3>、<h4> 元素设置不同粗细的装饰线：

h1 {
  text-decoration: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration: underline;
  text-decoration-thickness: 50%;
}

/* 使用简写属性 */
h4 {
  text-decoration: underline solid red 50%;
}

亲自试一试

CSS 语法

text-decoration-thickness: auto|from-font|length/percentage|initial|inherit;

属性值

值 描述
auto 浏览器选择装饰线的粗细。
from-font 如果字体文件包含有关首选粗细的信息，请使用该值。如果没有，则表现为 auto。
length/percentage 规定粗细为长度值或百分比值。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS4
JavaScript 语法： object.style.textDecorationThickness="5px"

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome IE / Edge Firefox Safari Opera
89.0 89.0 70.0 12.1 75.0