text-decoration-line

Avatar of Marie Mosley
Marie Mosley

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

text-decoration-line 属性使用下划线、上划线、删除线或这些线的组合来装饰文本。

p {
  text-decoration-line: underline;
}

  • none:不添加任何线条,并删除任何现有的线条 - 例如,none 将删除链接上的默认下划线。
  • underline:在文本下方添加一条 1px 的下划线。
  • overline:在文本上方添加一条 1px 的上划线。
  • line-through:在文本中添加一条 1px 的删除线。
  • inherit:继承父级的装饰。

blink 在 W3C 规范中,但已弃用,在任何当前浏览器中均不起作用。 当它起作用时,它会通过快速在 0% 和 100% 不透明度之间切换来使文本看起来“闪烁”。

组合值

您可以将 underlineoverlineline-through 值组合在一个空格分隔的列表中,以添加多条装饰线

p {
  text-decoration-line: overline underline line-through;
}

使用情况

text-decoration-line 属性与原始 text-decoration 属性实际上相同。 如果您只想在文本中添加一条或多条线,text-decoration 是一个更好的选择,因为它受所有浏览器支持,即使是非常旧的浏览器。 通常,使用 text-decoration-line 声明只有在编写包含 text-decoration-styletext-decoration-color 声明的详细样式规则时才有意义。 如果您想一起使用所有三个,可以使用 text-decoration 属性的简写形式。

简写形式

text-decoration-line 可以与 text-decoration-styletext-decoration-color 一起使用,在 CSS3 text-decoration 属性的简写形式中使用 (目前只有 Firefox 全面支持此功能)

.underlined {
  text-decoration: underline dotted red;
}

演示

此演示将在 Safari、Firefox 和 Chrome 中运行,并启用了实验性 Web 平台功能。 blink 值不包括在内。

更多信息

浏览器支持

ChromeSafariFirefoxOperaIEAndroidiOS
31 * †7.1 *6 ‡8 *

* 带 -webkit 前缀
† 启用了实验性 Web 平台功能标志
‡ 6 – 35 带 -moz 前缀,从 36 开始没有前缀。