我需要的效果：
html: <img src="images/my1.jpg" width="20%"/>
css: img{-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));}
浏览器的兼容性box-reflect
目前仅在Chrome Safari Opera浏览器下支持。
box-reflect 语法
box-reflect ： none | <direction> <offset>? <mask-box-image>?
由于此属性并不是W3C标准属性，在具体使用前，还需添加浏览器的私有属性，根据浏览器的兼容性，使用-webkit-前缀：
-webkit-box-reflect : none | <direction> <offset>? <mask-box-image>?
可惜Firefox下不支持这个属性，不过可以通过 -moz-element() 来实现模拟。
box-reflect 取值说明
1.none -------默认值，无倒影效果
2.<direction> --------此值表示 box-reflect 生成倒影的方向，主要包括以下几个值：
1）. above ------生成倒影在对象的上方；
2）. below -------生成倒影在对象的下方；
3）. left----------生成倒影在对象的左侧；
4）. right---------生成倒影在对象的右侧；
3.<offset>-----------用来设置生成倒影与对象之间的间距
4.<mask-box-image>-----用来设置倒影的遮罩效果，可以是背景图，也可以是渐变生成的背景图像