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

所以我查看了CSS Reflections on Can I Use.com，了解它目前只是-webkit-属性，至少在此时。

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

如何使用-moz-element()获得类似效果？

Answer 1

您正在匹配两个相当废弃的属性......

关于元素背景，在我看来很可惜它没有抓住..

＆＃13;

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

＆＃13;

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

＆＃13;

FF中的伪元素与猫的背景相同，旋转，并且应用了透明效果（假）。

如何使用-moz-element（）创建反射？

1 个答案: