CSS3新特性之box-reflect倒影

使用背景

有时候，我们需要实现如图一样的倒影图片，在css3的box-reflect属性出来之前，我们需要借助于第三方工具比如photoshop来实现这样的图片效果，可现在，box-flect的出现使我们能很方便的就实现这种图片效果

box-reflect属性的浏览器兼容性

box-reflect属性虽然能够很方便的实现图片、文字倒影的效果，但是到目前为止，浏览器对它的支持性还不是很完美；目前仅仅在chrome、safari、opera浏览器下才支持该属性

box-reflect语法

根据浏览器的兼容性，使用box-reflect属性需要加上-webkit-前缀

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

direction: 表示该属性值生成倒影的方向，可以取值：above表示在原图的上方，below表示在原图的下方，left表示在原图的左侧，right表示在原图的右侧

offset：用于设置原图和倒影之间的间距，其值可以为em/px/%

mask-box-image：用于设置倒影的遮罩效果，可以是渐变颜色，用于设置倒影为渐变生成的图片，也可以是一张图片，用于设置倒影的显示效果为该图片的边框特效，不过图片必须为png格式

原文转载

原文: http://www.w3cplus.com/css3/css3-box-reflect.html © w3cplus.com