3.6 (案例) text-shadow

作者: 柒月柒日晴7 | 来源:发表于2017-06-07 23:13 被阅读0次

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>