css倒影（-webkit-box-reflect）

css倒影（-webkit-box-reflect）

-webkit-box-reflect属性提供元素倒影：
三个参数：

1. 参数1：方向：above（向上）below（向下）left（向左）right（向右）。
2. 参数2：倒影与元素的间隔（px或者百分比）。
3. 参数3：遮盖图片，语法跟background-image差不多。

css代码：

    div{
	  width:200px;
	  height:200px;
	  background:red;
	  text-align:center;
	  font:bold 50px/200px "微软雅黑";
	  -webkit-box-reflect:right 10px
	}

HTML代码：

<div>倒影</div>

页面效果：

-webkit-box-reflect也能设置图片的倒影：
css代码：

    img{
	  -webkit-box-reflect:right 10px
	}

HTML代码：

<img src="img/1.jpg">

页面效果：

还可以设置倒影的模糊程度：

-webkit-box-reflect: below 10px linear-gradient(transparent, white);

还能对倒影进行遮盖：

    img{
	  -webkit-box-reflect:right 10px url(img/border.png);
	}

注意：-webkit-box-reflect属性参数的位置不能变换，否则没有效果。而且该属性存在较大的兼容性问题，根据情况进行使用。