CSS 属性 text-decoration-style 用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线,不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时,用 text-decoration 简写属性会比分别写多个属性更方便。

如果设定的修饰效果具有特定的语义,例如删除线的意味着某些文本被删除了,开发者最好使用有语义的 HTML 标签来表达,比如 <del><s> 标签,因为浏览器有时可能会屏蔽某些样式,但语义化的标签则不会出现这样的问题。

当一次使用多个 line-decoration 属性时,使用 text-decoration 简写属性会更方便。

语法

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

solid
画一条实线。
double
画一条双实线。
dotted
画一条点划线。
dashed
画一条虚线。
wavy
画一条波浪线。
-moz-none
不画线。亦可用 text-decoration-line: none 替代。

格式化语法

solid | double | dotted | dashed | wavy

示例

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
<p class="wavy">This text has a wavy red line beneath it.</p>

规范

规范 状态 备注
CSS Text Decoration Module Level 3
text-decoration-style
Candidate Recommendation 初次定义。text-decoration 属性同时变成了定义多个相关属性的简写形式。

浏览器兼容性

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 57Edge No support NoFirefox Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 44Safari iOS Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support 7.0
wavyChrome Full support 57Edge No support NoFirefox Full support 6IE No support NoOpera Full support 44Safari Full support YesWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 6Opera Android Full support 44Safari iOS Full support YesSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

另请参阅

  • 当要设置多个线修饰属性时,用 text-decoration 简写属性会比分别写多个属性更方便

 

文档标签和贡献者

此页面的贡献者: Ende93, comehope
最后编辑者: Ende93,