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>
posted @ 2019-12-13 16:57  样子2018  阅读(979)  评论(0)  编辑  收藏  举报