?
This document uses PHP Chinese website manual Release
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 '>:指定文本裝飾的顏色。
所有瀏覽器均支持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+ |
支持 <' 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è)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.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 class="none">無(wú)裝飾文字</li> <li class="underline">帶下劃線文字</li> <li class="overline">帶上劃線文字</li> <li class="line-through">帶貫穿線文字</li> <li class="blink">帶閃爍文字</li> <li class="text-decoration-css3">如果你的瀏覽器支持text-decoration在CSS3下的改變,將會(huì)看到本行文字有一條紅色的下劃實(shí)線</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例