CSS-实现倒影效果box-reflect

我需要的效果：

html: <img src="images/my1.jpg" width="20%"/>

css:   img{-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));}

 

浏览器的兼容性box-reflect

目前仅在Chrome \ Safari \ Opera浏览器下支持。

 

box-reflect 语法

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

由于此属性并不是W3C标准属性，在具体使用前，还需添加浏览器的私有属性，根据浏览器的兼容性，使用-webkit-前缀：

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

可惜Firefox下不支持这个属性，不过可以通过 -moz-element() 来实现模拟。

 

box-reflect 取值说明

1.none -------默认值，无倒影效果

2.<direction> --------此值表示 box-reflect 生成倒影的方向，主要包括以下几个值：

1）. above ------生成倒影在对象的上方；

2）. below -------生成倒影在对象的下方；

3）.  left----------生成倒影在对象的左侧；

4）. right---------生成倒影在对象的右侧；

 

3.<offset>-----------用来设置生成倒影与对象之间的间距

4.<mask-box-image>-----用来设置倒影的遮罩效果，可以是背景图，也可以是渐变生成的背景图像