CSS：盒式反射（或替代）與IE10兼容嗎？

所以我在我的CSS以下行：CSS：盒式反射（或替代）與IE10兼容嗎？

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(white));

這正確呈現在Chrome中，你所期望的。我想知道是否有類似的選項的IE瀏覽器。我試着放棄webkit前綴，但這並不能解決問題。

檢查http://html5please.com/表示避免使用框反射 - 但上次功能更新時間超過一年前。

檢查http://www.xhtml-lab.com/css/create-reflection-effect-using-css3顯示了一種替代方塊反射的方法，但看起來並不優雅，作者在文章結尾表示該解決方案不適用於IE，而且她自己正在尋找解決方案更好那個已經兩歲多了。

檢查http://caniuse.com暗示box-reflect在IE上根本不被支持 - 這並不能滿足我的希望。但是我找不到日期，因此爲了這個討論會假裝它已經過時了:-p。

來源

2013-07-06 Karl

你可以參考這個例子中，它提供了替代到箱子反映 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/ –

Ichigo - TBH，我在發佈之前看過那個頁面。我只是很難跟蹤那個人的榜樣。看起來他只有廚房的水槽。它似乎也依賴於一個外部svg文件，這可能會引入我希望通過排除js而避免的相同性能問題。 – Karl

截至目前有沒有盒子反映屬性IE 但是我已經做了變通方法，使其工作在IE

<style type="text/css"> 
    #imgmask 
    { 
    -webkit-transform: scaleY(-1); 
    -moz-transform: scaleY(-1); 
    -ms-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    transform: scaleY(-1); 
    filter: flipv; 
    opacity:0.20; 
    filter: alpha(opacity='20'); 
    } 
</style> 

<div id="Div1"> 
<img src="Images/Photo.jpg" alt="Photos" height="200" width="200" /> 
</div> 
<div id="imgmask"> 
<img src="Images/Photo.jpg" alt="Photos" height="200" width="200" /> 
</div>

感謝 AB

來源

2013-07-06 04:36:40

AB - 這確實會產生_nearly_我正在尋找的結果，以及一個非常乾淨的實施啓動！這可以用漸變代替不透明度濾鏡來完成嗎？漸變將使反射「更短」 - 不透明度濾鏡提供了一個完整的反射，它有其用途，而不是我目前需要的。 – Karl

CSS：盒式反射（或替代）與IE10兼容嗎？

回答

相關問題