非标准CSS3属性-webkit-box-reflect制作倒影

在Web制作中，有些时候需要实现一些倒影的效果。比如说如下图：

box-reflect语法

​​​​​​​-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?

box-reflect是非标准属性所以需要添加浏览器的私有属性-webkit-。

box-reflect取值说明

从box-reflect语法中可以得知，其主要包括以下几个属性值：

• none:此值为box-reflect默认值，表示无倒影效果；
• <direction>:此值表示box-reflect生成倒影的方向，主要包括以下几个值：
• above:表示生成的倒影在元素对象的上方；
• below:表示生成的倒影在元素对象的下方；
• left:表示生成的倒影在元素对象的左侧；
• right:表示生成的倒影在元素对象的右侧；
• <offset>:用来设置生成倒影与元素对象之间的间距，其取值可以是固定的像素值，也可以是百分比值，只要是CSS中的长度单位都可以，此值可以使用负值；
• <mask-box-image>:用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像。

注意：当元素对象倒影方向没有足够多的空间预留给生成的倒影放置的时候，将不会显示出来倒影。

box-reflect浏览器兼容

wap端可以使用，做到渐进增强（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用）即可。

Firefox中的替代方案是使用-moz-element()来替代

<div class="box-reflect" id="moz-reflect"><img src="http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/box-reflect.jpg" alt="" height="200" /></div>

我们通过伪类:after来模拟：

.box-reflect { 
    margin: 10px auto; 
    width: 200px; 
} 
#moz-reflect:after {
    content: ""; 
    display: block; 
    background: -moz-element(#moz-reflect) no-repeat;
    width: auto; 
    height: 200px; 
    -moz-transform: scaleY(-1);
}

就这样就完了，怎么可能，文章开头的如下图的代码怎么着也粘上来啊。

<div class="indexTag">
        <a href="#" class="appointment-link"></a>
        <a class="down-btn_index" href="#"></a>
</div>

@function j($px, $base-font-size:64) {
    @return ($px / $base-font-size) * 1rem;
}

.indexTag{
    position:absolute;
    top:j(686);
    left:0;
    right:0;
    display:flex;
    justify-content: center;
}



.appointment-link,.down-btn_index{
    width:j(268);
    height:j(112);
    background:url(../images/yy.png) left top/j(268) j(224);
    -webkit-box-reflect: below j(-24) -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
}

.down-btn_index{
    background-position: 0 j(-112);
}

经测试图片做为img标签元素或背景都可以实现倒影。如果是img标签元素，-webkit-box-reflect代码就写在img标签上，如果是背景，-webkit-box-reflect代码就写在背景元素上。

番外：使用inherit继承背景图像实现

每个CSS属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。我们对图片容器添加一个伪元素，使用 background-image:inherit继承父值的背景图值来制作倒影。

div {
    margin: 50px auto;
    width: 200px;
    height: 200px;
    background-image: url('http://images2015.cnblogs.com/blog/608782/201609/608782-20160926101029078-1479229145.jpg');
    position: relative;
}

div:before {
    content: "";
    background-image: inherit;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    transform: rotateX(180deg);
}

div:after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: -200px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1)0%, rgba(255, 255, 255, 0)100%);
    z-index: 2;
}