text-decoration

Posted on Edited on In Views: Disqus:

 

一、text-decoration

在 CSS1 裡 text-decoration 屬性有三種可使用，

分別為：overline、line-through、underline。

並且 text-decoration 屬性還可以一同指定多種樣式，

例如：text-decoration: underline overline;

 

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            text-decoration: overline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: underline;
        }

        h4 {
            text-decoration: underline overline;
        }
    </style>
</head>
<body>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>

</body>
</html>

 

二、text-decoration-line

到了 CSS3 時，還新增了 text-decoration-line、text-decoration-color、text-decoration-style 屬性，

而 text-decoration-line 屬性值則有 overline、line-through、underline。

特別注意目前 IE、Edge 瀏覽器都不支援。

 

三、text-decoration-color

text-decoration-color 屬性值可以用來指定顏色，

特別注意目前 IE、Edge 瀏覽器都不支援。

 

四、text-decoration-style

text-decoration-style 屬性可以用來指定樣式，屬性值有，

solid、double、dotted、dashde、wavy。

不能單獨指定 text-decoration-style 屬性，需要一併指定 text-decoration-line 屬性才有作用。

特別注意目前 IE、Edge 瀏覽器都不支援。

 

<!DOCTYPE html>
<html>
<head>
    <style>

        h1 {
            text-decoration: overline;
            text-decoration-style: solid;
        }

        h2 {
            text-decoration: line-through;
            text-decoration-style: wavy;
        }

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

        h4 {
            text-decoration: underline overline;
            text-decoration-style: wavy;
        }
    </style>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
</body>
</html>

 

五、text-decoration shorthand

CSS3 的 text-decoration 屬性也有提供簡寫，文法為

text-decoration: text-decoration-line text-decoration-color text-decoration-style;

特別注意目前 IE、Edge 瀏覽器都不支援。

 

參考資料：

CSS text-decoration Property