CSS属性框 - 反映兼容性？

Question

对于mozilla和其他浏览器是否有与-webkit-box-reflect类似的属性？我无法在google上找到哪些其他浏览器支持此功能。所以如果有人能告诉我或给我链接，那真是太好了。

Answer 1

这是可能的不仅与webkit（最新的铬或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（火狐 - 壁虎）：

#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创建一个带有褪色不透明度的镜像元素。