CSS text-decoration-style 属性

CSS text-decoration-style属性

text-decoration-style 属性用于为一段文本设置修饰线条的风格。具体来说，该属性可以控制文本中下划线、删除线、波浪线等线的形状和样式。常见的text-decoration-style属性取值包括：solid（实线），double（双线），dotted（虚线），dashed（破折号），wavy（波浪线）等。

基本语法

text-decoration-style 属性的基本语法如下：

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

此外，text-decoration-style属性还有继承性。

取值说明

• solid：一个实线；
• double：两条同样的线；
• dotted：一条点线；
• dashed：一条虚线；
• wavy：一条波浪线。

实例演示

下面是一些使用text-decoration-style属性的实例。

实线

p {
  text-decoration: underline;
  text-decoration-style: solid;
}

效果如下：

双线

p {
  text-decoration: underline;
  text-decoration-style: double;
}

效果如下：

点线

p {
  text-decoration: underline;
  text-decoration-style: dotted;
}

效果如下：

虚线

p {
  text-decoration: underline;
  text-decoration-style: dashed;
}

效果如下：

波浪线

p {
  text-decoration: underline;
  text-decoration-style: wavy;
}

效果如下：

注意事项

• text-decoration-style属性仅用于设置修饰线条的样式，而不直接产生修饰线。text-decoration属性可以同时设置线的样式和产生线条。

• 本属性可以单独使用，也可以和其他属性一起使用，如text-decoration-line属性，text-decoration-color属性。在使用本属性时，最好要使text-decoration-line属性设为underline或line-through，否则，可能无法看出其效果。

• 本属性不影响字体文本，只对字体文本下的修饰线条进行样式控制。

总结

本文主要介绍了text-decoration-style属性的基本语法、常用取值、注意事项等内容，此属性的使用对于控制文本中辅助性线条的样式非常有帮助，可以增加文本的视觉吸引力，提高用户体验。