Question

mozilla和其他浏览器是否有类似-webkit-box-reflect的属性？我在google上找不到其他浏览器支持的内容。所以，如果有人可以告诉我或给我链接，那将是非常好的。

Answer 1

这是可能的，不仅有webkit（最新的chrome或safari），还有最新的firefox。

以下是示例： http://codepen.io/jonathan/pen/pgioE

HTML：

<div id="someid">
   <img src="image url" />
<div/>

CSS（webkit）：

#someid {
        /* need some space for the reflection */
        margin-bottom: 120px;
        /* the gradient makes the reflection fade out */
        -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}

CSS（Firefox - Gecko）：

#someid {
        position: relative;
        /* need some space for the reflection */
        margin-bottom: 120px;
}

#someid:before {
        content:""; /* needed or nothing will be shown */
        background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat;
        -moz-transform: scaleY(-1); /* flip the image vertically */
        position:relative;
        height:140px;
        width: 360px; /* should be > image width + margin + shadow */
        top: 247px;
        left:0px;
 }

Firefox使用-moz-element进行反射（https://developer.mozilla.org/en-US/docs/CSS/element），而webkit使用专有供应商前缀进行反射。

我希望这有帮助！

Answer 2

-webkit-box-reflect属性仅受webkit浏览器支持，即Chrome和Safari。由于它是一个专有的webkit属性，因此没有其他浏览器的等价物。

另一种方法是使用javascript创建一个褪色不透明的镜像元素。

CSS属性框 - 反映兼容性？

2 个答案: