用CSS3实现图片倒影效果，同时给出兼容早期版本IE的方案

      关于倒影效果，相信大家都不陌生。它在web2.0时代颇受欢迎，几乎每个网站都喜欢使用一下，至少可以让网站的设计跟得上时代的步伐。

　　现在，这种效果虽然谈不上时尚，但仍然符合大众的审美标准。用的人少了，大家却又觉得好看的话，运用在网站上反而更容易给到用户新鲜感，或者眼前一亮的感觉。

　　下面我们先来看一下最终的效果:

　　既然这是web2.0时代的产物，那我们也会去兼容旧版本的浏览器（主要是IE8及以下版本）。在使用css3的时候，我们也尽量少用容易受版本影响的功能，比如before，after这样的伪元素。

　　先把这张可爱的小猫照片命名为cat.jpg，并保存到html文件目录下的images文件夹，然后我们就可以开始编写代码了。

　　基础的html代码如下:

　　跟本站的一些类似的CSS3教程相比，本教程的HTML代码有点啰嗦，倒影层还分成了两个div。但若使用伪元素，那么这个地方就可以简化不少。不过为了兼容旧版浏览器，我们就适当牺牲一下啦。

　　这张图片比较适合搭配黑色背景，所以我们把body的背景颜色改成纯黑。

　　运行,效果没什么特别的,如下图所示:

　　然后就到图片下面的down层了。这里需要一张图片搭配一个渐变淡出，所以我们建立了两个层。

　　这两个层需要重叠，因此内部需要绝对定位，所以要给down层设置相对定位，让内部元素以down层的左上角作为参考点。

       然后我们为reflection设置样式，显然我们应该使用cat.jpg作为背景图片。

　　运行效果如下，又多了一只可爱的小猫，不过这次的被裁剪过，因为倒影确实没必要做得那么大。

　　然后要翻转，CSS3实现起来很简单，用transform属性即可。

　　scaleY(-1)代表在垂直方向上缩放-100%，100%代表大小不变，所以加个负号代表方向相反，也就实现了翻转的效果。

　　5行代码的功能一致，不同前缀用于兼容不同的浏览器。

　　再次运行，效果总感觉有点怪怪的,如下图所示:

　　嗯，反射的话，倒影应该是从图片底部开始延伸，现在下方被裁剪了，自然就感觉反射的效果比较别扭。

　　既然要背景底部对齐，那么我们就调整背景的位置吧，方法是利用background-position属性，设置其为bottom即可。

　　再次运行，效果就正确了：

　　不过倒影不需要这么明亮，淡一点就行了，也就是可以加点透明度。控制该效果的，是opacity属性。

　　运行效果如下图所示：

　　现在有点倒影的感觉了，但是倒影跟背景的分界过于清晰。你可以用多个div对倒影进行拆分，然后每个倒影有不同的opacity，那么就能实现倒影的淡出了。然而这个方法太笨也太累，更常用的做法是叠加一个透明渐变。

　　事实上，要在图片上叠加透明渐变实现淡出是一件非常困难的事情，这相当于要让图片的不同像素有不同的alpha。本例使用一种简化的方法，用透明到不透明的黑色渐变来实现，因为背景是黑色，所以看起来就像透明的了。

　　渐变也是CSS3的强项，我们可以通过CSS3的linear-gradient实现从上到下的色彩渐变。

　　由于渐变可以用在多个地方，所以此处我们要把渐变的结果赋值到background-image属性上。

　　可以看到，倒影层跟渐变层有20像素的错位，这是为了让阴影在一开始的时候淡出没那么块，从而让人感觉图片所在的地面更加光滑洁净。

　　两行background-image的功能相同，不同前缀用于兼容不同的浏览器。

　　运行效果如下图所示：

　　效果完成了，但使用早期版本IE的朋友可能会很郁闷，我到现在都只是看到原始图片，根本做不出什么倒影效果。或者说这个倒影一直都没倒过来。

　　是的，前面我们一直没有对低版本IE做任何的兼容处理。

　　兼容IE的代码说简单不简单，说复杂也不算复杂。代码量不大，但是你会看到各种晦涩难懂的名词。

     比如透明度等于50%，IE的写法如下：

　　然后，翻转也属于滤镜的范畴，其值为flipv，它跟alpha=50%用英文空格分开。

　　所以透明度兼容的补充代码如下：

　　这样的话，旧版IE也能看到半透明效果了。

　　接着是渐变，它也归filter管。这么多乱七八糟的效果都放在一个属性里面，区分起来当然就麻烦了，所以你会发现渐变的名称非常地长，它包含了很多层包路径，具体如下。

　　至此，IE的兼容处理就做好了，代码虽然不多，但是各种属性非常难记。

　　使用CSS3制作各种炫酷的效果无疑是当前最能迎合网络潮流的做法。然而追逐时尚的脚步太快，我们留下的脚印也许会太浅，很容易被时代的浪花冲刷的比较模糊，一些美好的回忆也就在不经意间为我们所遗忘。所以，适当的时候放慢脚步，停下来品尝一杯清茶，细细品味古老的IE和传统的CSS技术，对于每天忙于Web开发的城市人来说，也不失为一种享受。