CSS3的box-reflect(反射)

box-reflect(反射)一共有3个值

1. direction 定义方向，取值包括 above 、 below 、 left 、 right
   代码展示

img{
		//above：指定倒影在对象的上边
		//below：指定倒影在对象的下边
		//left：指定倒影在对象的左边
		//right：指定倒影在对象的右边
       -webkit-box-reflect: below;
    }

效果图

2. offset 定义反射偏移的距离
 代码展示

img{
		//用长度值来定义倒影与对象之间的间隔,可以为负值
       -webkit-box-reflect: below 10px;
    }

效果图

3. mask-box-image定义遮罩图像，该图像将覆盖投影区域
 代码展示

 img{
       -webkit-box-reflect: below 0px linear-gradient(
       			//镜面透明度从下往上渐变
                transparent,rgba(0,0,0,0.8)
       );
    }

效果图