文本装饰风格 | text-decoration-style

该text-decoration-style CSS属性设置由text-decoration-line指定的线的样式。该样式适用于所有指定的线条，但没有办法为text-decoration-line定义的每个线条设定不同的样式。当要一次设置多个线条装饰属性时，使用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;

如果指定的修饰具有特定的语义含义，如直通线意味着某些文本已被删除，那么鼓励作者使用HTML标记（如，<del>或<s>）来表示该含义。由于浏览器在某些情况下可能会禁用样式，所以在这种情况下，采用HTML标记可以使得该语义并不会消失。

Initial value	solid
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

可能值

solid——绘制单行实线

double——绘制双行实线

dotted——绘制一条虚线(点状)

dashed——绘制一条虚线(短线状)

wavy——绘制一条波浪线

-moz-none——不绘制线，非标准接口，使用text-decoration-line: none作为代替。

形式语法

solid | double | dotted | dashed | wavy

实例

.example {    
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;    
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}

.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>

规范

Specification	Status	Comment
CSS Text Decoration Module Level 3The definition of 'text-decoration-style' in that specification.	Candidate Recommendation	Initial definition. The text-decoration property is now a shorthand to define multiple related properties.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57	6.0 (6.0) - 39.0 (39.0)-moz 36.0 (36.0)	No support	44	(Yes)-webkit-
wavy	57	6.0 (6.0)	No support	44	(Yes)-webkit-

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57	57	6.0 (6.0)- 39.0 (39.0)-moz 36.0 (36.0)	No support	44	(Yes)-webkit-
wavy	57	57	6.0 (6.0)	No support	44	(Yes)-webkit-

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18