text-decoration-thickness

**text-decoration-thickness** CSS 属性设置元素中使用的文本装饰线的笔划粗细，例如删除线、下划线或上划线。

试一试

语法

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-width-property

注意：此属性以前称为text-decoration-width，但在 2019 年更新为text-decoration-thickness。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅