-webkit-box-reflect制作镜像的样式介绍
2017-05-04 23:00

-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;
}

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

blob.png

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

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

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

blob.png

镜像没有紧贴着元素了,而是向右偏移了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;
}

blob.png

.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;
}

效果如下:

blob.png

-webkit-box-reflect的适用元素

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

-webkit-box-reflect的兼容性

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

blob.png

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

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

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

blob.png

然后我们通过-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 也是可以有正常效果的,不写的话就没有效果了。

blob.png

虽然不算是很完美,可也算是一个倒影的效果。最后再解释一下-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中的一个存在的样式,我们还是可以对其进行一些了解的,万一日后他成长成了一个逆天的东西呢,呵呵。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(788)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1