text-decoration 屬性/樣式/取值/語(yǔ)法/格式寫(xiě)法/簡(jiǎn)寫(xiě)/用法[CSS教程手冊(cè)]

語(yǔ)法：

text-decoration：<' text-decoration-line '> || <' text-decoration-style '> || <' text-decoration-color '>

默認(rèn)值：看每個(gè)獨(dú)立屬性

適用于：所有元素

繼承性：無(wú)

動(dòng)畫(huà)性：看每個(gè)獨(dú)立屬性

計(jì)算值：看每個(gè)獨(dú)立屬性

相關(guān)屬性：<' text-decoration-skip '> || <' text-underline-position '>

取值：

<' text-decoration-line '>：: 指定文本裝飾的種類(lèi)。相當(dāng)于CSS2.1的 <' text-decoration '> 屬性，可取值：none | underline | overline | line-through | blink
<' text-decoration-style '>：: 指定文本裝飾的樣式。
<' text-decoration-color '>：: 指定文本裝飾的顏色。

說(shuō)明：

復(fù)合屬性。檢索或設(shè)置對(duì)象中的文本的裝飾。

所有瀏覽器均支持CSS2.1中的 <' text-decoration '> 屬性，在CSS3中，該屬性定義被移植到其新的分解屬性 <' text-decoration-line '> 上；
對(duì)應(yīng)的腳本特性為textDecoration。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
CSS3復(fù)合屬性	6.0-11.0	2.0-5.0	4.0-45.0	6.0-7.0	15.0-29.0	6.0-7.1	2.1-4.4.4	18.0-42.0
		6.0-35.0^-moz-		7.1-8.0^-webkit-^#1		8.0-8.3^-webkit-^#1
		36.0+		7.1-8.0^-webkit-^#1		8.0-8.3^-webkit-^#1

支持 <' text-decoration-style '> 寫(xiě)入 <' text-decoration '> 縮寫(xiě)方式，但其dotted | dashed屬性值會(huì)表現(xiàn)為實(shí)線。

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>text-decoration_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列【CSS在線手冊(cè)-網(wǎng)站設(shè)計(jì)教程參考資料】</title>
<meta name="author" content="易網(wǎng),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)站建設(shè),www.dgyx668.com" />
<style>
.test li{margin-top:10px;}
.test .none{text-decoration:none;}
.test .underline{text-decoration:underline;}
.test .overline{text-decoration:overline;}
.test .line-through{text-decoration:line-through;}
.test .blink{text-decoration:blink;}
.test .text-decoration-css3{
	-webkit-text-decoration:#f00 wavy underline;
	-moz-text-decoration:#f00 solid underline;
	text-decoration:#f00 solid underline;
}
</style>
</head>
<body>
<ul class="test">
	<li id="50hq51i"    class="none">無(wú)裝飾文字</li>
	<li id="wfxl75s"    class="underline">帶下劃線文字</li>
	<li id="ril11cj"    class="overline">帶上劃線文字</li>
	<li id="w0imvoj"    class="line-through">帶貫穿線文字</li>
	<li id="cwah3xo"    class="blink">帶閃爍文字</li>
	<li id="6jfrexo"    class="text-decoration-css3">如果你的瀏覽器支持text-decoration在CSS3下的改變，將會(huì)看到本行文字有一條紅色的下劃實(shí)線</li>
</ul>
</body>
</html>