CSS参考手册
»
属性列表
»
文本属性
»
相关内容:
其它文本属性参考
选择其它项
text-indent
text-overflow
text-align
text-transform
text-decoration
text-decoration-line
text-decoration-color
text-decoration-style
text-shadow
text-fill-color
text-stroke
text-stroke-width
text-stroke-color
letter-spacing
word-spacing
vertical-align
word-wrap
white-space
direction
unicode-bidi
line-height
tab-size
text-decoration-line
版本:CSS3
继承性:无
语法:
text-decoration-line
:none | [ underline || overline || line-through ]
默认值
:
none
取值:
none:
指定文字无装饰
underline:
指定文字的装饰是下划线
overline:
指定文字的装饰是上划线
line-through:
指定文字的装饰是贯穿线
说明:
检索或设置对象中的文本装饰线条的位置。
text-decoration-line的作用类同于CSS1时的text-decoration
对应的脚本特性为
textDecorationLine
。
兼容性:
浅绿
= 支持
红色
= 不支持
墨绿
= 部分支持
橙色
= 实验性质
支持版本
\类型
IE
Firefox
Safari
Chrome
Opera
版本
6.0-9.0
4.0-9.0
5.1
13.0-16.0
11.50-11.60
示例:
<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8" /> <title>text-decoration-line_CSS参考手册_web前端开发参考手册系列</title> <meta name="copyright" content="www.doyoe.com" /> <style> .test li{margin-top:10px;} .test li:nth-child(1){ -moz-text-decoration-style:solid; -moz-text-decoration-color:#000; -moz-text-decoration-line:underline; -o-text-decoration-style:solid; -o-text-decoration-color:#000; -o-text-decoration-line:underline; } .test li:nth-child(2){ -moz-text-decoration-style:solid; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline; } .test li:nth-child(3){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:underline; } .test li:nth-child(4){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:overline; } .test li:nth-child(5){ -moz-text-decoration-style:dashed; -moz-text-decoration-color:#f00; -moz-text-decoration-line:line-through; } </style> </head> <body> <ul class="test"> <li>简单的下划线文字</li> <li>红色下划线文字</li> <li>下划虚线文字</li> <li>上划线文字</li> <li>贯穿线文字</li> </ul> </body> </html>