css3倒影【-webkit-box-reflect】 

<!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>

 

posted @ 2017-02-20 10:58  半遮  阅读(170)  评论(0)    收藏  举报