此属性 firefox 并不支持，并且需要加上 -webkit- 解决兼容性问题

顾名思义，这个属性用来设置一个反射

img {
	margin: 500px auto;
	display: block;
	-webkit-box-reflect: below;
}


此时就在下面生成了一个镜像的反射效果，这里我们是让反射在下面，我们可以使用以下关键字设置方向

• below：下方
• above：上方
• left：左边
• right：右边

同时，这个属性支持第二个参数，第二个参数可以指定反射和元素本体的距离

img {
	margin: 500px auto;
	display: block;
	-webkit-box-reflect: below 10px;
}


此时元素和反射之间就有了 10 像素的距离。

这个属性还支持第三个参数，就是一个蒙版图像，同 mask 一样，当然这里由于是反射，所以我们大多数时候用的还是渐变来做这个事，而不会真正给一个图像。

img {
	margin: 500px auto;
	display: block;
	-webkit-box-reflect: below 10px linear-gradient(to bottom, transparent, black);
}


这样就实现了一个渐隐的反射效果