css左侧投影_CSS3实现投影效果

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

-webkit-box-reflect:

属性取值说明如下：

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

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

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

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

}