使用背景
有时候,我们需要实现如图一样的倒影图片,在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