CSS 之字体装饰(Text Decoration)
一、属性
Properties 属性 | Description 简介 |
---|---|
text-decoration | 复合属性。检索或设置对象中的文本的装饰。 |
text-decoration-line | 检索或设置对象中的文本装饰线条的位置。 |
text-decoration-color | 检索或设置对象中的文本装饰线条的颜色。 |
text-decoration-style | 检索或设置对象中的文本装饰线条的形状。 |
text-shadow | 设置或检索对象中文本的文字是否有阴影及模糊效果 |
二、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体装饰</title> <style> .test li{margin-top:10px;} .test li:nth-child(1){ -webkit-text-decoration-style:solid; -webkit-text-decoration-color:#000; -webkit-text-decoration-line:underline; -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>