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

依赖的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>
继承性：无
动画性：否
计算值：指定值

语法简介：

1. none：无倒影

2. < direction >：倒影的位置
   above：上方
   below：下方
   left ：左侧
   right ：右侧

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

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

4. < 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)));
    }