用CSS3在火狐浏览器中实现倒影

火狐浏览器中倒影的实现

目前只有Webkit浏览器(谷歌浏览器和Safari浏览器)实现 box-reflect 属性。为了在火狐浏览器中也实现倒影功能，我们需要寻找另外的途径：使用 -moz-element() 方法。这个方法能够复制指定网页元素的内容。让我们来看看下面的例子：我们把图片包裹着一个ID是 someid 的

里。并且，为了存放倒影影像，我们将使用 :before 伪元素，就像下面：

这里的 -moz-transform 是一个负值，作用就是让复制过来的图形上下颠倒，达到倒影的效果。为了让 :before 伪元素跟原始图形相配合，我们需要移动它的位置。这里的背景偏移量 (-127px)是 :before 伪元素高(140px) – (图片的高 (247px) + div的border (20px))。需要注意的是，火狐浏览器版的倒影实现只能用在页面的背景是真实背景。背景色要和 :before 伪元素使用的渐变色的颜色一致。

因为所有的属性都是来实现倒影的，而且这些属性都有火狐浏览器独有的前缀，和Webkit的倒影不冲突，所以在代码在可以把两个版本倒影方法都写上，保证两种浏览器里都有效果。

视频倒影

官方文档中说当倒影的实体内容变化时，倒影的内容也会相应更新。因此，这种技术用在视频是有特殊的效果。

CSS倒影技术在火狐浏览器中的小问题

有时，火狐浏览器生成的渐变色图形会比背景元素稍微小一些，导致有一些间隙线出现。为了避免这种情况出现，在 :before 伪元素的顶部和底部加 1px 的 padding，并且分别设置背景的裁剪方式和原点：

padding:1px 0px;

background-origin:border-box,content-box;

background-clip:border-box,content-box;