<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒立</title>
<style type="text/css">
body{
background: black;
padding: 0;
margin: 0;
}
.box-reflect{
margin: 50px 50PX;
width: 1500px;
height: 300px;
-webkit-box-reflect: below 0 -webkit-linear-gradient(top ,rgba(0,0,0,0.01) 30%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.9) 90%);/*倒立*/
}
img{
display: block;
display: inline-block;
width: 600px;
height: 100%;
}
.div2{
width: 1200px;
height: 200px;
margin: 0 50PX;
/*border: 1px solid red;*/
background: rgba(255,255,0,1);
}
</style>
</head>
<body>
<div class="box-reflect">
<img src="http://a1.qpic.cn/psb?/V10qv1HU4UepFY/WW21EK6ANhacug6IA242PtE0RdsbpkPIEES72YtygRg!/b/dCABAAAAAAAA&bo=IAMVAiADFQIFCSo!&rf=viewer_4"/><img src="http://a3.qpic.cn/psb?/V10qv1HU4UepFY/dA7suJV5Ly6AUu6xM56Gfn2uIuulhwZtPLKOWDH3ab8!/b/dB8BAAAAAAAA&bo=.wQhA*sEIQMFACM!&rf=viewer_4"/>
</div>
<!--<div class="div2"></div>-->
</body>
</html>
