如何使用css3实现图片倒影效果

依赖的css3属性：box-reflect对应语法：语法简介：倒影实例

依赖的css3属性：box-reflect

对应语法：

box-reflect ： none | <direction> <offset>? <mask-box-image>?<direction> ： above | below | left | right<offset> ： <length> | <percentage><mask-box-image> ： none | <url> | <linear-gradient> |<radial-gradient> |<repeating-linear-gradient> | <repeating-radial-gradient>继承性：无动画性：否计算值：指定值

语法简介：

none：无倒影

< direction >：倒影的位置

above：上方

below：下方

left ：左侧

right ：右侧

< offset >：与倒影之间的距离

< length >：用长度值来定义倒影与对象之间的间隔。可以为负 < percentage >：用百分比来定义倒影与对象之间的间隔。可以为负值

< mask-box-image >：设置遮罩图像

none：无遮罩图像< url >：使用绝对或相对地址指定遮罩图像。< linear-gradient >：使用线性渐变创建遮罩图像。< radial-gradient >：使用径向(放射性)渐变创建遮罩图像。< repeating-linear-gradient >：使用重复的线性渐变创建背遮罩像。< repeating-radial-gradient >：使用重复的径向(放射性)渐变创建遮罩图像。

说明：

设置或检索对象倒影。

假设定义了 < mask-box-image >，< offset >必须指定，否则可以省略

对应的脚本特性为boxReflect。

兼容性：

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

倒影实例

1.只设置位置

代码：

img{-webkit-box-reflect: below;}

2.设置与倒影间的距离

代码：

img{-webkit-box-reflect: below 10px;}

3，通过遮罩，利用渐变实现真实倒影效果

img{-webkit-box-reflect:below 10px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(1%,transparent),to(rgba(250,250,250,0.1)));}