CSS3实现投影效果

Webkit引擎定义了-webkit-box-reflect属性，该属性能够实现投影效果，具体语法如下：

-webkit-box-reflect: <direction> <offset> <mask-box-image>

属性取值说明如下：

<direction>：定义反射方向，取指包括above、below、left和right。

<offset>：定义反射偏移的距离，取指包括数值或者百分比，其中百分比是根据对象的尺寸进行确定，如果省略该参数值，则默认为0。

<mask-box-image>：定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。也可以设置渐变色或者纯色覆盖。

当对象源发生变化时，投影能够自动更新，当鼠标经过对象上时，也能够在投影中看到鼠标效果，如果属性应用到<video>标签上，还可以看到视频以投影效果进行播放。不仅限于图片，在网页中的任何对象都可以应用CSS Reflections，例如文字和视频。

投影的规模和反射偏移不影响页面的布局。

下面是一个例子：

.reflect1 {
      -webkit-box-reflect:below;
}
.reflect2{
      -webkit-box-reflect:below 10px;
}
.reflect3{
     -webkit-box-reflect:below 5px 
                        -webkit-gradient(linear,left top,left bottom, 
                         from(transparent),
                         color-stop(0.5,transparent),to(white));
}

查看运行效果