3.6 (案例) text-shadow

text-shadow.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            color: #fff;
            font-size: 30px;
            /*text-shadow:1px 1px 10px #000;*/
            text-shadow:1px 1px 5px red;
        }

        .box2{
            color: #fff;
            font-size: 30px;
            text-shadow:1px 1px 1px red,2px 2px 2px #333,3px 3px 3px #FFC0CB,4px 4px 4px #FADB4E,5px 5px 5px #000,6px 6px 5px #000,7px 7px 5px #000,8px 8px 5px #000,9px 9px 5px #000,10px 10px 5px #D00000;
        }
    </style>
</head>
<body>
    text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)
    <div class="box1">
        文本阴影效果
    </div>

    text-shadow 可设置多个阴影效果
    <div class="box2">
        文本阴影效果
    </div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容