当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS text-decoration-color用法及代码示例


此属性用于指定文本上装饰的颜色(上划线,下划线和line-throughs)。

用法:

text-decoration-color:color|initial|inherit;

属性值:


  • color:设置text-decoration的颜色。
    用法:
    text-decoration-color:color;
    

    例:

    <!DOCTYPE html> 
    <html lang="en" dir="ltr"> 
      
    <head> 
        <meta charset="utf-8"> 
        <title>text-decoration</title> 
        <style> 
            h1 { 
                color:green; 
            } 
              
            body { 
                text-align:center; 
            } 
              
            table { 
                margin:auto; 
            } 
              
            th { 
                padding:10px 25px; 
            } 
              
            .underline { 
                text-decoration:underline wavy; 
            } 
              
            .overline { 
                text-decoration:overline solid; 
            } 
              
            .line-through { 
                text-decoration:line-through double; 
            } 
              
            .red td { 
                text-decoration-color:red; 
            } 
              
            .green td { 
                text-decoration-color:green; 
            } 
              
            .blue td { 
                text-decoration-color:blue; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1>GeeksforGeeks</h1> 
      
        <h2> text-decoration-color:color;</h2> 
        <table> 
            <tr> 
                <th>underline</th> 
                <th>line-through</th> 
                <th>overline</th> 
            </tr> 
            <tr class="red"> 
                <td class="underline">Hello Geeks!</td> 
                <td class="line-through">Hello Geeks!</td> 
                <td class="overline">Hello Geeks!</td> 
            </tr> 
            <tr class="green"> 
                <td class="underline">Hello Geeks!</td> 
                <td class="line-through">Hello Geeks!</td> 
                <td class="overline">Hello Geeks!</td> 
            </tr> 
            <tr class="blue"> 
                <td class="underline">Hello Geeks!</td> 
                <td class="line-through">Hello Geeks!</td> 
                <td class="overline">Hello Geeks!</td> 
            </tr> 
        </table> 
    </body> 
      
    </html>

    输出:

  • initial:将此属性设置为其默认值。
    用法:
    text-decoration-color:initial;
    

    例:

    <!DOCTYPE html> 
    <html lang="en" dir="ltr"> 
      
    <head> 
        <meta charset="utf-8"> 
        <title>text-decoration</title> 
        <style> 
            h1 { 
                color:green; 
            } 
              
            body { 
                text-align:center; 
            } 
              
            #example { 
                text-decoration:underline double; 
                text-decoration-color:initial; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2> text-decoration-color:initial;</h2> 
        <div id="example"> 
         This text-decoration-color of this text is set to initial. 
        </div> 
    </body> 
      
    </html>

    输出:

  • 支持的浏览器:text-decoration-color属性支持的浏览器如下所示:

    • 谷歌浏览器57.0
    • Firefox 36.0
    • Opera 44.0
    • Safari 7.1


相关用法


注:本文由纯净天空筛选整理自Archana choudhary大神的英文原创作品 CSS | text-decoration-color Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。