©
本文档使用 PHP中文网手册 发布
text-decoration-line:none | [ underline || overline || line-through || blink ]
默认值:none
适用于:所有元素
继承性:无
动画性:否
计算值:指定的值
none:指定文字无装饰
underline:指定文字的装饰是下划线
overline:指定文字的装饰是上划线
line-through:指定文字的装饰是贯穿线
blink:指定文字的装饰是闪烁。
相当于CSS2.1的 <' text-decoration '> 属性
需要注意的是大部分浏览器都不支持blink
值,因为规范允许用户代理忽略该效果;
对应的脚本特性为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前端开发参考手册系列</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前端开发参考手册系列</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前端开发参考手册系列</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前端开发参考手册系列</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前端开发参考手册系列</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>
点击 "运行实例" 按钮查看在线实例