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創建一個帶有褪色不透明度的鏡像元素。