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