css3之text-shadow

text-shadow_CSS

  • 普通文字阴影

    测试普通文字阴影效果

  • 模糊文字阴影效果

    测试模糊文字阴影效果

  • 多重模糊文字阴影效果

    测试多重模糊文字阴影效果

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <title>text-shadow_CSS</title>
    <meta name="author" content="" />
    <meta name="copyright" content="" />
    <style>
    /*
        text-shadow:
        1. length : 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
        2. length: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
        3. length: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
        4. color: 设置对象的阴影的颜色。

    */
    .test li    {margin-top:10px;}
    .test .mormal p    {text-shadow:1px 1px rgba(0,0,0,.3);}
    .test .blur p    {text-shadow:1px 1px 2px rgba(0,0,0,.3);}
    .test .group p    {
        text-shadow    :1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);    
    }
    </style>
    </head>
    <body>
    <ul class="test">
        <li class="mormal">
            <strong>普通文字阴影</strong>
            <p>测试普通文字阴影效果</p>
        </li>
        <li class="blur">
            <strong>模糊文字阴影效果</strong>
            <p>测试模糊文字阴影效果</p>
        </li>
        <li class="group">
            <strong>多重模糊文字阴影效果</strong>
            <p>测试多重模糊文字阴影效果</p>
        </li>
    </ul>
    </body>
    </html>



posted @ 2012-02-08 11:19  jennyQ  阅读(202)  评论(0)  编辑  收藏  举报