在Web制作中，有些时候需要实现一些倒影的效果。比如说，你看到一个美女，你想从另一个角度来看这个MM的风姿，如下图：

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

浏览器的兼容性

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

虽然目前仅在Chrome、Safari和Opera浏览器下支持，但这并不影响我们来学习这个属性的应用，有必无患吧。

box-reflect语法

要了解box-reflect属性如何使用，我们得先知道其语法怎么，这样才能更好的清楚使用这个属性。其基本语法如下：

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

由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：

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

可惜的是在Firefox下并不支持这个属性，不过值得庆幸的是，在Firefox下可以通过-moz-element()来模拟实现，稍后我会详细介绍。

box-reflect取值说明

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

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

仅从理论上介绍，似乎不太生动，接下来，我们以实例来介绍。

倒影的方向

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

倒影在对象的上方

假设我们需要给一张图片做倒影效果，其结构其实非常简单：

<div class="box-reflect"><img src="http://imgt9.bdstatic.com/it/u=2,687775882&fm=19&gp=0.jpg" alt="" height="200"/></div>

根据前面的语法介绍，要让倒影在对象的上方，我们只需要给box-reflect属性取值为above即可：

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

其效果如下：

DEMO

特别提示：在此示例中，我们为倒影提供了一个空白区，如果没有提供空白区，将没有任何效果显示。在上面的示例基础上做一下修改，我把.box-reflect的margin做一下修改：

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

你将会看到一个非常奇怪的效果，就是倒影没有了：

DEMO

如果你要问我为什么？说真的，我也不清楚，我只能认为:如果倒影在对像上方，如果没有预留一定的空间，将会示为无法看见。