css3之box-reflect(倒影)

本文探究一下css3的box-reflect来实现所谓的倒影效果：

 

 

1、语法：

 

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

direction有如下几个值：

• above 倒影在元素的上边
• below 倒影在元素的下边
• left 倒影在元素的左边
• right 倒影在元素的右边

offset 生成的倒影与元素之间的间隔，可以是负值

• <length> | <percentage>

mask-box-image

• none
• <url>
• <line-gradient>
• <radial-gradient>
• <repeating-linear-gradient>
• <repeating-radial-gradient>

2、 兼容性：

从caniuse上面获取的数据显示，目前支持的基本是 -webkit前缀的

chrome22+

safari5.1+

iOS3.2+

扩展阅读：

http://css.doyoe.com/

http://caniuse.com/#search=box-reflect

http://cued.xunlei.com/log-002