文本装饰风格 | text-decoration-style
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——绘制单行实线
形式语法
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- |
