當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

CSS text-decoration-line用法及代碼示例


text-decoration-line屬性用於設置各種text-decoration。 text-decoration可以包含許多值，例如下劃線，上劃線，line-through等。可以組合多個text-decoration屬性。對於示例-下劃線和上劃線值可顯示文本下方和上方的行。

用法:

text-decoration-line:none|underline|overline|line-through|initial|
inherit;

屬性值：


  • none:它是默認值，用於不指定任何行來裝飾文本。

    用法:

    text-decoration-line:none;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>text-decoration-line property</title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:none; 
            } 
            .gfg { 
                text-decoration-line:none; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:none;</h2> 
          
        <p class = "gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    輸出：

  • underline:它用於在文本下方或下方顯示一行。

    用法:

    text-decoration-line:underline;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:underline; 
            } 
            .gfg { 
                text-decoration-line:underline; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:underline;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    輸出：

  • overline:它用於在文本上方顯示一行。

    用法:

    text-decoration-line:overline;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:overline; 
            } 
            .gfg { 
                text-decoration-line:overline; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:overline;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    輸出：

  • line-through它用於顯示文本中的一行。

    用法:

    text-decoration-line:line through;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:line-through; 
            } 
            .gfg { 
                text-decoration-line:line-through; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:line-through;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    輸出：

  • initial:用於將屬性設置為其默認值。它與none屬性相同。

    用法:

    text-decoration-line:initial;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:initial; 
            } 
            .gfg { 
                text-decoration-line:initial; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:initial;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    輸出：

    支持的瀏覽器：下麵列出了text-decoration-line屬性支持的瀏覽器：

    • 穀歌瀏覽器57.0
    • Firefox 36.0、6.0 -moz-
    • 蘋果Safari 7.1 -webkit-
    • Opera 44.0


相關用法


注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 CSS | text-decoration-line Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。