css3倒影之 box-reflect

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

在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现，然后通过引入一张image。那么除了图片，我们有没有别的方法能实现呢？值得庆幸的是，到目前为之，CSS3有一个属性box-reflect可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

浏览器的兼容性
box-reflect属性虽然能帮助我们实现上图的效果，但到目前为止，浏览器对其支持性并不是非常的完美。在一些浏览器下还是无法直接通过这个属性来达到我们要的效果。那么到目前为止有哪些浏览器能支持这个属性呢？我们来看下面的表格：
虽然目前仅在Chrome、Safari和Opera浏览器下支持，但这并不影响我们来学习这个属性的应用，有必无患吧。

box-reflect语法如下：
box-reflect：none | ? ?
由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：
-webkit-box-reflect：none | ? ?
box-reflect：none | ? ?
可惜的是在Firefox下并不支持这个属性，不过值得庆幸的是，在Firefox下可以通过-moz-element()来模拟实现，稍后我会详细介绍。

box-reflect取值说明
从box-reflect语法中可以得知，其主要包括以下几个属性值：
第一个值：倒影方向
none:此值为box-reflect默认值，表示无倒影效果；
生成倒影的方向，主要包括以下几个值：
above:表示生成的倒影在对象（原图）的上方；
below:表示生成的倒影在对象（原图）的下方；
left:表示生成的倒影在对象(原图)的左侧；
right:表示生成的倒影在对象(原图)的右侧；
第二个值（可有可无）：
用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值，此值可以使用负值
第三个值（可有可无）：
用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像。

一.倒影的方向
box-reflect倒影方向跟我们CSS中的margin和padding类似，包括上、右、下、和左四个方向，每个方向都可以使用关键词来定义。下面我们能过简单的示例向大家演示这样的效果：

效果展示
1.above 倒影在对象的上方

.box img {
  -webkit-box-reflect: above;
  box-reflect: above;
}

2.below 倒影在对象的下方

.box img {
  -webkit-box-reflect: below;
  box-reflect: below;
}

3.left 倒影在对象的左方

.box img {
  -webkit-box-reflect: left;
  box-reflect: left;
}

4.right 倒影在对象的右方

.box img {
  -webkit-box-reflect: right;
  box-reflect: right;
}

注意：当倒影超出显示器能看到的范围时，超出的部分就看不了，其实是有倒影的。
以上倒影为例：

.box {
  margin: 0 auto 210px;
  width: 200px;
}
.box img {
  -webkit-box-reflect: above;
  box-reflect: above;
}

二.倒影与原图之间的距离

以下倒影为例：

.box img {
  -webkit-box-reflect: below;
  box-reflect: below 20px;
}

三.给倒影添加遮罩效果

除了可以给倒影设置方向和间距之外，其还具备第三个属性。也就是给生成的倒影添加遮罩效果。给生成的倒影添加遮罩效果，我们可以通过两种方式第一种是渐变生成的背景图像，第二种是外部的背景图像。接下来我们简单的来看看这两种方式。

使用渐变给倒影添加遮罩效果

我们先来看渐变生成的背景应用在生成的倒影中将会是什么样的效果。至于CSS3的渐变如何使用？这里就不花篇幅进行介绍了。如果你从未接触过CSS3的渐变，个人强烈建议您先阅读一下下面的几篇教程：

CSS3 Gradient
再说CSS3渐变——径向渐变
再说CSS3渐变——线性渐变

.box-reflect img {
  -webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
  box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
}

注意：给生成的倒影添加遮罩效果的时候，如果没有设置显式的间距将会让box-reflect失效。也就是说，当box-reflect属性中的属性值出现时，必须显式的设置值，如果不需要间距，将其设置为0。

使用背景图片给倒影添加遮罩效果

首先我们有一张米奇的png图片（这张图就是用来遮罩的）：

用于遮罩的图片必须是png格式图片。至于为什么？大家可以阅读早前翻译的一篇文章《CSS遮罩——如何在CSS中使用遮罩》。

.box img {
  -webkit-box-reflect: below 0  url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png);
  box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png);
}

由于Firefox不支持box-reflect
Firefox中的替代方案

使用-moz-element()来替代

简单示例：
在图片外面，我们有一个容器div，并且给他一个id名称moz-reflect
我们通过伪类: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);  
}