CSS——阴影

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one {
            text-shadow: 3px 5px 5px #FF0000;
        }
        p.two {
            color: white;
            text-shadow: 1px 1px 2px black,
                         0 0 25px blue,
                         0 0 5px darkblue;
        }
    </style>
</head>
<body>
    <p class="one">文本阴影效果</p>
    <p class="two">文本阴影效果</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: #CCC;
            float: left;
            margin: 5px;
        }
        div.one {
            box-shadow: 2px 2px 5px #000;
        }
        div.two {
            box-shadow: 2px 2px 5px #000 inset;
        }
        div.three {
            margin-left: 10px;
            box-shadow: 0px 0px 0px 3px #bb0a0a,
                        0px 0px 0px 6px #2e56bf,
                        0px 0px 0px 9px #ea982e;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>