以前要实现这种效果，我们只能乖乖的找设计去制作，然后在页面上插入一张图片，但是随着CSS3的出现，我们可以纯代码实现，如何实现呢？就是通过CSS3的box-reflect属性。下面这篇文章就给大家分享了用CSS3来制作倒影效果的方法，有需要的朋友们可以参考借鉴。

兼容性 既然是CSS3的属性，我们当然要来看看兼容性：点击查看 接下来，我们来了解box-reflect如何使用？ 语法如下： -webkit-box-reflect：none | ? ? box-reflect:none | ? ? 属性说明： none：此值为默认值，表示无倒影； direction：生成倒影的方向 above：指定倒影在对象的上边 below：指定倒影在对象的下边 left：指定倒影在对象的左边 right：指定倒影在对象