• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    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的代码*/
    }
    

    This text has a wavy red line beneath it.