本文探究一下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+
扩展阅读: