CSS-实现的倒影的效果

发布时间:2017年2月4日 作者:未知 查看次数:1251


CSS-实现的倒影的效果


自:http://blog.sina.com.cn/s/blog_7256fe8f01016f50.html


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css的倒影的效果</title>

    <style>


        .box{

            font-size: 72px;

            color: red;

            -webkit-box-reflect:

            below -34px

            -webkit-gradient(linear,

                left top,left bottom,

                from(rgba(0,0,0,0)),

                to(rgba(255,255,255,0.5)));

        }

    </style>

</head>

<body>

    <div class="box"><img src="b.jpg" width="300"></div>

        

        -webkit-box-reflect:位置 距离px -webkit-gradient()

        位置选项:above,below,left,right


</body>

</html>




版权所有!www.sieye.cn
E.Mail:sieye@sohu.com QQ:66697110