以下是程序代码

<meta charset="utf-8" /></p> <div class='stackone'><img src="//img.netblog.site/city.jpg" /></div> <div class='stacktwo'><img src="//img.netblog.site/city.jpg" /></div> <div class='stackthree'><img src="//img.netblog.site/city.jpg" /></div> <style> div[class*='stack'] { float: left; position: relative; margin: 50px; } div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after { border: 6px solid #fff; height: 200px; width: 200px; -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); } div[class*='stack']:before, div[class*='stack']:after { background: #768590; content: ""; position: absolute; z-index: -1; /*Dirty IE8 hack*/ height: 0px\9; width: 0px\9; border: none\9; } div[class*='stack']:before {background: #eff4de;} /*STACK ONE*/ .stackone:before {top: 4px;left: -6px;} .stackone:after {top: -2px;left: -6px;}</p> <p>/*STACK TWO*/ .stacktwo:before { top: 0px; left: -10px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .stacktwo:after { top: 5px; left: 0px; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg); } /*STACK THREE*/ .stackthree:before { top: 5px; left: -15px; z-index: -1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .stackthree:after { top: -2px; left: -10px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } </style> <p>

提示：可以先修改部分代码再运行