CSS3倒影

Demo：

-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));

 

语法 box-reflect：none | <direction> <offset><mask-box-image>

<direction> = above | below | left | right

above：指定倒影在对象的上边

below：指定倒影在对象的下边

left：指定倒影在对象的左边

right：指定倒影在对象的右边

<offset> = <length> | <percentage>

<length>：用长度值来定义倒影与对象之间的间隔。可以为负值

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

<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

none：无遮罩图像

<url>：使用绝对或相对地址指定遮罩图像。

<linear-gradient>：使用线性渐变创建遮罩图像。

<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。