?
? ????? PHP ??? ???? ??? ?? ??
text-decoration-line:none | [ underline || overline || line-through || blink ]
默認值:none
適用于:所有元素
繼承性:無
動畫性:否
計算值:指定的值
none:指定文字無裝飾
underline:指定文字的裝飾是下劃線
overline:指定文字的裝飾是上劃線
line-through:指定文字的裝飾是貫穿線
blink:指定文字的裝飾是閃爍。
相當于CSS2.1的 <' text-decoration '> 屬性
需要注意的是大部分瀏覽器都不支持blink
值,因為規(guī)范允許用戶代理忽略該效果;
對應的腳本特性為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參考手冊_web前端開發(fā)參考手冊系列</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>沒有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_CSS參考手冊_web前端開發(fā)參考手冊系列</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>沒有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_CSS參考手冊_web前端開發(fā)參考手冊系列</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>沒有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_CSS參考手冊_web前端開發(fā)參考手冊系列</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>沒有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-line_CSS參考手冊_web前端開發(fā)參考手冊系列</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>沒有文本裝飾</li> <li>文本帶有下劃線裝飾</li> <li>文本帶有上劃線裝飾</li> <li>文本帶有貫穿線裝飾</li> <li>文本帶有閃爍裝飾</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例