CSS3 Notes: -webkit-box-reflect实现倒影的实例

平常我们要实现倒影的效果，一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。 在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影，语法如下所示 [ above | below | right | left ]? <length>? <image>? 该值包涵了三部分：方位+偏移量+遮罩层 方位是必不可少的；在使用遮罩层的时候，偏移量是不可少的，如没有则用零代替 ！！！重要：遮罩层的效果与颜色无关，例如使用渐变颜色做遮罩，都是实色则透明