圖片層疊效果

The HTML

< div class = "stackone" >

    < img src = "http://lorempixum.com/200/200/city/7" >

</ div >

Basic Styles




* { margin : 0 ; padding : 0 ;}

body { background : #ccd3d7 ;}

Top Image Styles

.stackone {      border : 6px solid #fff ;      float : left ;      height : 200px ; width : 200px ;      margin : 50px ;      position : relative ;      -webkit-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 );      -moz-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 );      box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 ); }

.stackone:before {

     content : "" ;

     height : 200px ; width : 200px ;   

     background : #eff4de ;

    border: 6px solid #fff;

    position : absolute ;

     z-index : -1 ;

     top : 0px ;

     left : -10px ;

     -webkit-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 );

     -moz-box-shadow: 2px 2px 5px rgba( 0 , 0 , 0 , 0.3 );

    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

    -webkit-transform: rotate( -5 deg);

     -moz-transform: rotate( -5 deg);

     -o-transform: rotate( -5 deg);

     -ms-transform: rotate( -5 deg);

     transform: rotate( -5 deg);

}