-webkit-box-reflect镜像

-webkit-box-reflect是webkit内核浏览器的一个私有属性，用来对block元素制作一个镜像的效果，这个属性有四个基础值：above,below,left,right,分别表示在四个方向上制作镜像：

<div class="tsk_cont">
    <span class="mirror">Mooshine妹纸前端</span>
</div>

.mirror{
    -webkit-box-reflect:right;
    display: inline-block;
    position:relative;
}

这段代码在右侧制作一个镜像，效果如下：

而镜像是不影响DOM结构的，就跟box-shadow一样，只是一种显示效果。

我们还可以在right方向后面跟一个像素值，表示镜像距离元素的距离：

.mirror{
    -webkit-box-reflect:right 30px;
    display: inline-block;
    position:relative;
}

镜像没有紧贴着元素了，而是向右偏移了30px。-webkit-box-reflect的镜像效果,偏移位置不知可以用px，还可以使用百分比等单位。

-webkit-box-reflect除了可以设置偏移量外，还可以设置linear-gradient或者radial-gradient来设置镜像的蒙版渐变。

.mirror{
    -webkit-box-reflect:below 20px linear-gradient(rgba(0,0,0,0.5),transparent);
    display:inline-block;
    position:relative;
}

.mirror{
    -webkit-box-reflect:below 20px 
    radial-gradient(circle,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.9) 100%);
    display:inline-block;
    position:relative;
}

效果如下：

-webkit-box-reflect的适用元素

-webkit-box-reflect除了display:inline外，其他的展现形式都可以使用这个属性，当然你要注意如果使用-webkit-box-reflect:right时，如果你的div宽度百分百，那么他的镜像已经超出了文档范围，你自然是看不到的，需要设置宽度小一些才能看到。

-webkit-box-reflect的兼容性

-webkit-box-reflect的兼容性可以使只有webkit内核的浏览器支持：

但是呢，由于移动端的浏览器绝大多数都是webkit内核的，我们还是可以在移动端使用-webkit-box-reflect这个css属性的。

用-webkit-box-reflect制作一个倒影

现在我们有一张图片，这样的

然后我们通过-webkit-box-reflect给他制作一个倒影：

<div class="mirror_cont">
    <div class="mirror_img">
        <img src="images/mood.png"/>
    </div>
</div>

.mirror_cont{
    margin:25px 25px 0 25px;

}
.mirror_img{
    width:70%;
    margin:0 auto;
    -webkit-box-reflect:below 0 linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.5) 100%);
}
.mirror_img img{
    width:100%;
    vertical-align: top;
}

通过-webkit-box-reflect在图片下方制作一个镜像，实现我们的倒影效果，这里提醒一点，-webkit-box-reflect如果使用了linear-grandient或者radial-gradient渐变蒙版的时候，必须得添加偏移量，即使写一个0 也是可以有正常效果的，不写的话就没有效果了。

虽然不算是很完美，可也算是一个倒影的效果。最后再解释一下-webkit-box-reflect中使用的linear-gradient或radial-gradient的渐变色，是起到一个蒙版的作用，他们对镜像的影响就是透明度，其颜色对镜像效果是没有任何影响的，所以我们要在linear-gradient中使用transparent，rgba等设置透明度的渐变。

上面代码中的-webkit-box-reflect样式改成下面这样，效果是一样的：

.mirror_img{
    width:70%;
    margin:0 auto;
    -webkit-box-reflect:below 0 linear-gradient(rgba(0,0,0,0.3),rgba(125,255,0,0.5) 100%);
}

只要透明度是一致的，颜色对镜像没有半点作用。

这个镜像样式，现在用的不多，经来用的也不一定多，我们完全可以使用transform来实现它所能实现的任何效果。不过作为CSS中的一个存在的样式，我们还是可以对其进行一些了解的，万一日后他成长成了一个逆天的东西呢，呵呵。