DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!
text-decoration-line
属性使用下划线、上划线、删除线或这些线的组合来装饰文本。
p {
text-decoration-line: underline;
}
值
none
:不添加任何线条,并删除任何现有的线条 - 例如,none
将删除链接上的默认下划线。underline
:在文本下方添加一条 1px 的下划线。overline
:在文本上方添加一条 1px 的上划线。line-through
:在文本中添加一条 1px 的删除线。inherit
:继承父级的装饰。
值 blink
在 W3C 规范中,但已弃用,在任何当前浏览器中均不起作用。 当它起作用时,它会通过快速在 0% 和 100% 不透明度之间切换来使文本看起来“闪烁”。
组合值
您可以将 underline
、overline
或 line-through
值组合在一个空格分隔的列表中,以添加多条装饰线
p {
text-decoration-line: overline underline line-through;
}
使用情况
text-decoration-line
属性与原始 text-decoration
属性实际上相同。 如果您只想在文本中添加一条或多条线,text-decoration
是一个更好的选择,因为它受所有浏览器支持,即使是非常旧的浏览器。 通常,使用 text-decoration-line
声明只有在编写包含 text-decoration-style
或 text-decoration-color
声明的详细样式规则时才有意义。 如果您想一起使用所有三个,可以使用 text-decoration
属性的简写形式。
简写形式
text-decoration-line
可以与 text-decoration-style
和 text-decoration-color
一起使用,在 CSS3 text-decoration
属性的简写形式中使用 (目前只有 Firefox 全面支持此功能)
.underlined {
text-decoration: underline dotted red;
}
演示
此演示将在 Safari、Firefox 和 Chrome 中运行,并启用了实验性 Web 平台功能。 blink
值不包括在内。
更多信息
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
31 * † | 7.1 * | 6 ‡ | 无 | 无 | 无 | 8 * |
* 带 -webkit
前缀
† 启用了实验性 Web 平台功能标志
‡ 6 – 35 带 -moz
前缀,从 36 开始没有前缀。
相关
text-decoration-color
.element { text-decoration-color: orange; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
您好,
有没有办法实现 https://i.imgur.com/8C1nLyc.png ?
用户定义的横线宽度?
是的,我认为这是可能的,但可以使用单独的 div 而不是
text-decoration-line
属性,并依靠基于父容器宽度的百分比。以下是一些选项: https://codepen.io/geoffgraham/pen/LgOymm非常感谢 Goeff,它有效!