玻璃，水面会有倒影，有时候我们在web中模拟一些效果，或者实现一些质感的时候，也是需要投影效果的。那我们该如何实现呢？本文从-webkit-box-reflect入手，按照浏览器，依次介绍各种投影效果的实现，很多demo，很多截图很多源代码展示，希望本文的内容能够对您的学习有所帮助！
文章关键字 ‘图片投影效果’
-webkit-box-reflect属性简介及元素镜像倒影实现
2016年08月14日，星期日reflection.js-实现图片投影倒影效果js插件
2009年08月30日，星期日如果您使用过igoogle的话，可能注意到其“谷歌图片集锦”模块的底部图片都是有投影效果的。
要实现这种图片投影效果，需要用到一个HTML5中使用的标签，canvas标签。
如果您对canvas标签不熟，没有关系，已经有人将这种投影效果写成了插件，您直接调用此js就可以实现投影效果了。
使用方法很简单：
1.调用此js；
2.需要投影的图片添加class——”reflect”；
然后预览就可以实现图片的投影效果了。
本文提供实例页面和打包下载，希望对您有所帮助。
我的应用
我的应用