?
This document uses PHP Chinese website manual Release
text-decoration-line:none | [ underline || overline || line-through || blink ]
默認(rèn)值:none
適用于:所有元素
繼承性:無(wú)
動(dòng)畫性:否
計(jì)算值:指定的值
none:指定文字無(wú)裝飾
underline:指定文字的裝飾是下劃線
overline:指定文字的裝飾是上劃線
line-through:指定文字的裝飾是貫穿線
blink:指定文字的裝飾是閃爍。
相當(dāng)于CSS2.1的 <' text-decoration '> 屬性
需要注意的是大部分瀏覽器都不支持blink
值,因?yàn)橐?guī)范允許用戶代理忽略該效果;
對(duì)應(yīng)的腳本特性為textDecorationLine。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 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- | 8.0-8.3-webkit- | ||||||
36.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_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 li:nth-child(1){ -webkit-text-decoration-line:none; -moz-text-decoration-line:none; text-decoration-line:none; } .test li:nth-child(2){ -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(3){ -webkit-text-decoration-line:overline; -moz-text-decoration-line:overline; text-decoration-line:overline; } .test li:nth-child(4){ -webkit-text-decoration-line:line-through; -moz-text-decoration-line:line-through; text-decoration-line:line-through; } .test li:nth-child(5){ -webkit-text-decoration-line:blink; -moz-text-decoration-line:blink; text-decoration-line:blink; } </style> </head> <body> <ul class="test"> <li>沒(méi)有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_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 li:nth-child(1){ -webkit-text-decoration-line:none; -moz-text-decoration-line:none; text-decoration-line:none; } .test li:nth-child(2){ -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(3){ -webkit-text-decoration-line:overline; -moz-text-decoration-line:overline; text-decoration-line:overline; } .test li:nth-child(4){ -webkit-text-decoration-line:line-through; -moz-text-decoration-line:line-through; text-decoration-line:line-through; } .test li:nth-child(5){ -webkit-text-decoration-line:blink; -moz-text-decoration-line:blink; text-decoration-line:blink; } </style> </head> <body> <ul class="test"> <li>沒(méi)有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_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 li:nth-child(1){ -webkit-text-decoration-line:none; -moz-text-decoration-line:none; text-decoration-line:none; } .test li:nth-child(2){ -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(3){ -webkit-text-decoration-line:overline; -moz-text-decoration-line:overline; text-decoration-line:overline; } .test li:nth-child(4){ -webkit-text-decoration-line:line-through; -moz-text-decoration-line:line-through; text-decoration-line:line-through; } .test li:nth-child(5){ -webkit-text-decoration-line:blink; -moz-text-decoration-line:blink; text-decoration-line:blink; } </style> </head> <body> <ul class="test"> <li>沒(méi)有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_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 li:nth-child(1){ -webkit-text-decoration-line:none; -moz-text-decoration-line:none; text-decoration-line:none; } .test li:nth-child(2){ -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(3){ -webkit-text-decoration-line:overline; -moz-text-decoration-line:overline; text-decoration-line:overline; } .test li:nth-child(4){ -webkit-text-decoration-line:line-through; -moz-text-decoration-line:line-through; text-decoration-line:line-through; } .test li:nth-child(5){ -webkit-text-decoration-line:blink; -moz-text-decoration-line:blink; text-decoration-line:blink; } </style> </head> <body> <ul class="test"> <li>沒(méi)有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_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 li:nth-child(1){ -webkit-text-decoration-line:none; -moz-text-decoration-line:none; text-decoration-line:none; } .test li:nth-child(2){ -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(3){ -webkit-text-decoration-line:overline; -moz-text-decoration-line:overline; text-decoration-line:overline; } .test li:nth-child(4){ -webkit-text-decoration-line:line-through; -moz-text-decoration-line:line-through; text-decoration-line:line-through; } .test li:nth-child(5){ -webkit-text-decoration-line:blink; -moz-text-decoration-line:blink; text-decoration-line:blink; } </style> </head> <body> <ul class="test"> <li>沒(méi)有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例