CSS3干货17：纯CSS的几种图片投影制作

 纯CSS3 制作图片投影，各种投影，不许要图片制作了。

HTML代码：

<div class="box shadow1"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow2"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow3"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow4"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow5"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow6"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow7"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow8"><img src="images/mm.jpg" alt=""></div>
<div class="box shadow9"><img src="images/mm.jpg" alt=""></div>

CSS3 代码：

        .box{
            width: 308px;
            height: 287px;
            margin: 50px;
            background: #ccc;
            float: left;
            border:1px #999 solid;
        }
        .box img{
            display: block;
            width: 300px;
            height: 279px;
            border:4px #fff solid;
        }
        .shadow1{
            box-shadow: 25px 25px 5px rgba(0,0,0,0.4);
        }

        .shadow2{
            box-shadow: 0  0  10px rgba(0,0,0,0.8);
        }

        .shadow3 {
            box-shadow: 0  0  20px rgba(0,0,0,0.8) ;
        }

        .shadow4{
            position: relative;
        }
        .shadow4:before{
            content: "";
            width: 100%;
            height: 100%;
            background: #000;
            display: block;
            position: absolute;
            z-index: -1;
            top:5px;
            left:5px;
        }

        .shadow5{
            position: relative;
        }
        .shadow5:before{
            content: "";
            width: 80%;
            height: 40px;
            background: rgba(0,0,0,0.5);
            display: block;
            position: absolute;
            z-index: -1;
            top:260px;
            left:10%;
            filter:blur(5px);
            border-radius: 50%;
        }

        .shadow6{
            position: relative;
        }
        .shadow6:before{
            content: "";
            width: 80%;
            height: 40%;
            background: linear-gradient(left , rgb(0, 0, 0) 47% , rgba(0, 0, 0, 0) 100%);
            background: -o-linear-gradient(left , rgb(0, 0, 0) 47% , rgba(0, 0, 0, 0) 100%);
            background: -ms-linear-gradient(left , rgb(0, 0, 0) 47% , rgba(0, 0, 0, 0) 100%);
            background: -moz-linear-gradient(left , rgb(0, 0, 0) 47% , rgba(0, 0, 0, 0) 100%);
            background: -webkit-linear-gradient(left , rgb(0, 0, 0) 47% , rgba(0, 0, 0, 0) 100%);
            display: block;
            top:62%;
            left:10%;
            position: absolute;
            z-index: -1;
            transform: rotateZ(5deg);
            opacity: 0.5;
        }

        .shadow7{
            position: relative;
        }
        .shadow7:before{
            content: "";
            width: 100%;
            height: 40%;
            background: linear-gradient(top , rgb(0, 0, 0) 0% , rgba(0, 0, 0, 0) 100%);
            background: -o-linear-gradient(top , rgb(0, 0, 0) 0% , rgba(0, 0, 0, 0) 100%);
            background: -ms-linear-gradient(top , rgb(0, 0, 0) 0% , rgba(0, 0, 0, 0) 100%);
            background: -moz-linear-gradient(top , rgb(0, 0, 0) 0% , rgba(0, 0, 0, 0) 100%);
            background: -webkit-linear-gradient(top , rgb(0, 0, 0) 0% , rgba(0, 0, 0, 0) 100%);
            display: block;
            top:100%;
            left:0;
            position: absolute;
            z-index: -1;
            opacity: 0.2;
        }

        .shadow8{
            position: relative;
        }
        .shadow8:before{
            content: "";
            width: 100%;
            height: 10%;
            background: rgba(0,0,0,0.4);
            display: block;
            top:110%;
            left:0;
            position: absolute;
            z-index: -1;
            border-radius: 50%;
            filter: blur(5px);
        }

        .shadow9{
            position: relative;
        }
        .shadow9:before{
            content: "";
            width: 50%;
            height: 90%;
            background: rgba(0,0,0,0.2);
            display: block;
            top:10%;
            left:0;
            position: absolute;
            z-index: -1;
            filter: blur(2px);
            transform-origin: right top;
            transform: rotateZ(-5deg);
        }

        .shadow9:after{
            content: "";
            width: 50%;
            height: 90%;
            background: rgba(0,0,0,0.2);
            display: block;
            top:10%;
            right:0;
            position: absolute;
            z-index: -1;
            filter: blur(2px);
            transform-origin: left top;
            transform: rotateZ(5deg);
        }

喜欢的小伙伴们，赶紧试试吧~