如何使用-moz -element()创建反射

Question

我有一个使用以下代码的插件：

.ms-caro3d-template .ms-slide{
   -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(255,255,255,0.5)));
}

所以我在CO..com上查看了CSS的反思，以了解它目前是-webkit-唯一的属性，至少在这一点上。

但是，我可以说 Similar effect can be achieved in Firefox 4+ using the -moz-element() background property

我将如何使用-moz-element()？

Answer 1

您正在匹配两个非常放弃的属性...

关于元素背景，我认为这很可惜它没有抓住。

.test {
    width: 760px;
    height: 560px;
    background-image: url(http://placekitten.com/1000/750); 
    position: relative;
}
.test {
   -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, transparent), to(rgba(255,255,255,0.7)));
}
.mirror {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -1px;
    left: 0px;
    transform: rotateX(180deg);
    transform-origin: bottom center;
    background-image: linear-gradient(180deg, white 50%, transparent ), -moz-element(#cat);
    
}

<div class="test" id="cat"><div class="mirror"></div></div>

FF中的伪元素具有相同的猫，旋转和透明效果（假）的背景。