css中text-decoration-line屬性如何使用

發(fā)布時間：2020-09-24 11:21:00 來源：億速云閱讀：222 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css中text-decoration-line屬性如何使用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

在css中，text-decoration-line屬性是使用來規(guī)定文本修飾要使用的線條類型，如果需要同時設(shè)置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：默認(rèn)值，規(guī)定文本修飾沒有線條

underline ：規(guī)定文本的下方將顯示一條線

overline：規(guī)定文本的上方將顯示一條線

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

initial：設(shè)置該屬性為它的默認(rèn)值

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>

運行結(jié)果

關(guān)于css中text-decoration-line屬性如何使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

css中text-decoration-line屬性如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽