1.css3反射介绍

CSS3还增加了反射部分，允许CSS3设计反射，不用PS就可以在WEB端用代码实现。但是CSS3-reflections目前只有webkit引擎支持，只能在Google和Safari浏览器中使用。但是不要灰心，以后会适用于更主流的浏览器。

2.CSS3反射语法

语法：

框反射：无|方向偏移？蒙版盒图像

无：此值是box-reflect的默认值，表示没有反射效果；

方向：该值表示箱式反射产生反射的方向，主要包括以下值：

上方：表示生成的反射在物体(原图)上方；

下方：表示生成的反射在物体(原图)下方；

Left:表示生成的反射在对象(原始图像)的左侧；

右：表示生成的反射在物体(原图)的右侧；

偏移：用于设置生成的反射与对象(原始图像)之间的距离，可以是固定的像素值或百分比值，例如：

使用长度值设置生成的反射与原始图像的距离，只要是CSS中的长度单位，这个值可以是负数；

使用百分比设置生成的反射和原始图像之间的距离，或者使用负值

蒙版盒图像：用于设置反射的蒙版效果，可以是背景图像，也可以是渐变生成的背景图像。

3.CSS3反射的基本用法

(1)图像反射：

以下示例定义了一种简单的反射样式。我们可以根据实际情况设置反射的位置，反射在图片下面。

img {

宽度width:200px

height: 200px

-web kit-box-reflect : below；

}

img src='2017.1.23-1.jpg'/

如果反射在画面上方，没有预留一定空间，就看不到Ps:我们可以为父母设定一个更高值。

设置反射的边距：

边距偏移的值可以是长度值(像素、像素或像素)、百分比或负值