csstext-decoration-line屬性怎么用

來源：懂視網責編：小采時間：2020-11-12 00:12:28

csstext-decoration-line屬性怎么用

csstext-decoration-line屬性怎么用:text-decoration-line屬性定義及用法在css中，text-decoration-line屬性是使用來規定文本修飾要使用的線條類型，如果需要同時設置text-decoration-line、text-decoration-style 和 text-decoration-color 屬性的值，可以使用te

推薦度：

點擊下載本文 文檔為doc格式

導讀csstext-decoration-line屬性怎么用:text-decoration-line屬性定義及用法在css中，text-decoration-line屬性是使用來規定文本修飾要使用的線條類型，如果需要同時設置text-decoration-line、text-decoration-style 和 text-decoration-color 屬性的值，可以使用te

text-decoration-line屬性定義及用法

在css中，text-decoration-line屬性是使用來規定文本修飾要使用的線條類型，如果需要同時設置text-decoration-line、text-decoration-style 和 text-decoration-color 屬性的值，可以使用text-decoration屬性。text-decoration屬性可以將這三個屬性定義在一個聲明中。text-decoration-line屬性支持多個屬性值，比如使用underline和overline（text-decoration-line:underline overline;），在文本的上方和下方都顯示線條.

text-decoration-line屬性是css3中新增的屬性，目前主流瀏覽器都還不支持該屬性，但是Firefox瀏覽器支持另一個可替代該屬性的屬性（-moz-text-decoration-line屬性）。

text-decoration-line屬性語法格式

css語法：text-decoration-line: none/underline/overline/line-through/initial/inherit

JavaScript語法：object.style.textDecorationLine="overline"

屬性值說明

none：默認值，規定文本修飾沒有線條

underline ：規定文本的下方將顯示一條線

overline：規定文本的上方將顯示一條線

line-through：規定文本的中間將顯示一條線

initial：設置該屬性為它的默認值

inherit：從父元素繼承text-decoration-line屬性的值

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css text-decoration-line屬性文本修飾的線條類型</title>
<style type="text/css">
p{text-decoration: underline;}
#p1{text-decoration-line: overline;-moz-text-decoration-line: overline;}
#p2{text-decoration-line: underline;-moz-text-decoration-line: underline;}
#p3{text-decoration-line: line-through;-moz-text-decoration-line: line-through;}
#p4{text-decoration-line: overline underline;-moz-text-decoration-line: overline underline;}
</style>
</head>
<body>
<p id="p1">text-decoration-line屬性演示1</p>
<p id="p2">text-decoration-line屬性演示2</p>
<p id="p3">text-decoration-line屬性演示3</p>
<p id="p4">text-decoration-line屬性演示4</p>
</body>
</html>

運行結果