平常我们要实现倒影的效果，一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。
在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影，语法如下所示
[ above | below | right | left ]?
该值包涵了三部分：方位+偏移量+遮罩层
方位是必不可少的；在使用遮罩层的时候，偏移量是不可少的，如没有则用零代替
！！！重要：遮罩层的效果与颜色无关，例如使用渐变颜色做遮罩，都是实色则透明，透明则暴漏原始颜色
使用示例如下所示：
JS Bin
效果如下：
如果需要在firefox中实现类似效果，可以使用-moz-element()函数来实现，但是在旋转下效果差别较大，如下所示。
JS Bin
在chrome下使用-webkit-box-reflect的效果是这样的
如果要兼容IE浏览器还可以使用SVG或者canvas来做，SVG主要利用pattern+mask+linearGradient+scale来做，canvas使用scale+globalCompositeOperation。
SVG例子部分代码如下：
canvas例子部分代码如下
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var linearGradient1 = ctx.createLinearGradient(0,0,0,200);
linearGradient1.addColorStop(0,"red");
linearGradient1.addColorStop(1,"yellow");
var linearGradient2 = ctx.createLinearGradient(0,0,0,200);
linearGradient2.addColorStop(0,"transparent");
linearGradient2.addColorStop(1,"#ffffff");
ctx.fillStyle = linearGradient1;
ctx.fillRect(0,0,200,200);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = linearGradient2;
ctx.fillRect(0,0,200,200);
以上便是倒影实现的各种方法，对比之下用css3的-webkit-box-reflect实现最简单效果也好。希望对大家的学习有所帮助，也希望大家多多支持。
网站类容多为转载，如有侵权，请联系站长删除
上一个：深入理解css中的margin属性（推荐）CSS重要属性之 margin 属性知识大整合(必看篇)CSS margin全面了解浅谈css margin重叠CSS 之margin知识点(必看)细说CSS中margin属性的使用 深入解析CSS中margin属性的使用CSS中使用负margin值来调整居中位置css的margin collapsing导致最上面会出现一个横条css行内元素padding,margin,width,height没有变化css中padding和margin的异同点介绍
下一个：利用CSS3实现折角效果实例源码js+css3实现的折角邮票图片墙特效源码纯css3实现的折角效果(无需图片和js代码)CSS3实现简易版的刮刮乐效果利用CSS3实现毛玻璃效果示例源码CSS3实现跳动的动画效果CSS3按钮鼠标悬浮实现光圈效果源码纯CSS3实现的鼠标经过菜单动画过渡效果纯CSS3代码实现switch滑动开关按钮效果 jQuery和CSS3实现弹性过渡全屏翻页特效源码纯CSS3实现图片无间断轮播效果
