CSS3中的box-reflect特性可以实现对图片和文字的倒影效果。

语法:

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
 box-reflect：none | <direction> <offset>? <mask-box-image>?

取值：

none：

无倒影

direction

above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边

offset

length：
用长度值来定义倒影与对象之间的间隔。可以为负值
percentage：
用百分比来定义倒影与对象之间的间隔。可以为负值

mask-box-image

none：
无遮罩图像
url：
使用绝对或相对地址指定遮罩图像。(必须是png格式的图片)
linear-gradient：
使用线性渐变创建遮罩图像。
radial-gradient：
使用径向(放射性)渐变创建遮罩图像。
repeating-linear-gradient：
使用重复的线性渐变创建背遮罩像。
repeating-radial-gradient：
使用重复的径向(放射性)渐变创建遮罩图像。