css box-reflect投影实例讲解

box-reflect一共有以下几个属性：

above：
指定倒影在对象的上边

below：
指定倒影在对象的下边

left：
指定倒影在对象的左边

right：
指定倒影在对象的右边

offset：倒影与对象之间的间隔，可以为负值。

另外还可以使用渐变以及图片。

above

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:above;
}

below

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:below;
}

left

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:left;
}

right

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:right;
}

offset偏移量

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:right 10px;
}

利用offset我们就可以给图片创建一个副本。

利用渐变制作图片倒影

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}

注意：如果同时指定方向以及渐变必须把偏移量也加上就算是0px也得写，不然不生效。

制作文字倒影

<style>
    h1{
        -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
    }
</style>
<h1>这是一段文字</h1>

话说本想结合裁剪制作一些东西，结果发现倒影被裁剪了。

<style>
    img{
        width:50px;
        height:50px;
        margin:100px;
        -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
        -webkit-clip-path:polygon(0px 100%,50% 0px,100% 100%,0px 100%);
    }
</style>

倒也不是说倒影没了，只是被裁剪了，有些图形还是会在的，结果发现真是意想不到啊。

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-clip-path:polygon(0px 200%,50% 0px,100% 200%,0px 200%);
    -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}

看来结合裁剪也是一种学问啊。