text-decoration-style

版本： CSS3

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;

浏览器支持

IE浏览器不支持 text-decoration-style ，浏览器都支持 text-decoration-style

语法:

text-decoration-style :solid | double | dotted | dashed | wavy

取值:

• solid：画一条实线。
• double：画一条双实线。
• dotted：画一条点划线。
• dashed：画一条虚线。
• wavy：画一条波浪线。

说明:

检索或设置对象中的文本装饰线条的形状。

• 支持dotted | dashed属性值，但效果都表现为实线。
• 对应的脚本特性为 textDecorationStyle 。

例子

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

<p class="wavy">this text has a wavy red line beneath it.</p>

p{
 text-decoration:underline;
 -moz-text-decoration-style:wavy; /*针对firefox的代码*/
}