CSS属性框反射兼容性？答案

【问题标题】：CSS property box-reflect compatibility?CSS属性框反射兼容性？
【发布时间】：2012-02-28 17:28:24
【问题描述】：

对于 mozilla 和其他浏览器，是否有与 -webkit-box-reflect 类似的属性？我在谷歌上找不到其他浏览器支持这个。因此，如果有人可以告诉我或给我链接，那就太好了。

【问题讨论】：

标签： css

【解决方案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 使用专有的供应商前缀进行反射。

我希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：