CSS3-阴影效果

一、给盒子添加阴影。
box-shadow: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影；
注意：
1、默认情况下是外阴影。
2、阴影扩展是指在原有阴影上继续添加阴影。
3、当box-shadow：水平偏移垂直偏移模糊度；时。默认阴影颜色由盒子里面内容颜色决定。
二、给文字添加阴影。
text-shadow: 水平偏移垂直偏移模糊度阴影颜色；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>阴影</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                /* box-shadow: 0px 0px 0px 0px green; */
                /* box-shadow: 10px 5px 0px 0px green; */
                /* box-shadow: -10px -5px 0px 0px green; */
                /* box-shadow: 10px 10px 10px 0px green; */
                box-shadow: 5px 5px 10px 10px green;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                margin: 100px auto;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                text-shadow: 5px 5px 2px green;
            }
        </style>
    </head>
    <body>
         <div class="box1">我是粉色的盒子哟！</div>
         <div class="box2">我是粉色的盒子哟！</div>
    </body>
</html>

（1）box-shadow: 10px 5px 0px 0px green;
CSS3-阴影效果
（2） box-shadow: -10px -5px 0px 0px green;

（3） box-shadow: 10px 10px 10px 0px green;

（4） box-shadow: 5px 5px 10px 10px green;

（5）文字效果：

相关推荐