We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 属性同时变成了定义多个相关属性的简写形式。

浏览器兼容性

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support57 ?

36

6 — 39 -moz-

No44 Yes -webkit-
wavy57 ?6 No44 Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5757 ?

36

6 — 39 -moz-

44 Yes -webkit- 7.0
wavy5757 ?644 Yes7.0

 

另请参阅

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

 

文档标签和贡献者

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