DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!
text-decoration-style
属性设置链接的下划线样式,以及应用了 text-decoration
的任何文本的下划线、上划线或删除线样式。
a {
text-decoration-style: solid;
}
值
solid
:默认值。装饰为一条实线。double
:装饰为一对实线。dotted
:装饰为点线。dashed
:装饰为虚线。wavy
:装饰为波浪线。
演示
在撰写本文时,text-decoration-style
仅在 Firefox 中正式支持。它也将在启用了实验性 Web 平台功能标志的 Chrome 浏览器中运行。
速记
在支持 text-decoration-style
和 text-decoration-color
的浏览器中,您可以在 text-decoration
速记属性中添加装饰样式
.underlined {
text-decoration: underline dotted red;
}
目前只有 Firefox 支持此未带前缀的。Safari 支持它,带有 -webkit
前缀。Chrome 也需要 -webkit
前缀,并且在 Chrome 标志中启用了实验性 Web 平台功能。
更多信息
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
31 * | 无 | 6 † | 无 | 无 | 无 | 无 |
* 仅在启用了实验性 Web 平台功能标志的情况下
† Firefox 6+ 带有 -moz
前缀,36+ 无前缀。
相关
text-decoration
.element { text-decoration: underline; }
text-decoration-color
.element { text-decoration-color: orange; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
不错的浏览器支持…… …不是!
迫不及待地等待他们全部支持。非常棒的新功能!!!
哎呦。有没有什么原因导致它没有得到应有的支持?