CSS: Is box-reflect (or an alternative) compatible with IE10?

问题

So I have the following line in my CSS:

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

This renders correctly in Chrome, as you would expect. I am wondering if there is a similar option for IE. I tried just dropping the webkit prefix, but that doesn't do the trick.

Checking http://html5please.com/ says to avoid using box-reflect - but the last time that feature was updated was more than a year ago.

Checking http://www.xhtml-lab.com/css/create-reflection-effect-using-css3 shows an alternative to box-reflect, but doesn't seem as elegant, and the author says at the end of the article that the solution doesn't work with IE, and that she herself is looking for a better solution. That one is over two years old.

Checking http://caniuse.com suggests box-reflect is not supported on IE at all - which does not fill me with hope. But I can't find a date, and will therefore pretend it's out of date for sake of this discussion :-p.

回答1:

As of now there is no box reflect property for IE But I have done a workaround to make it work in 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>

Thanks AB

来源：https://stackoverflow.com/questions/17499332/css-is-box-reflect-or-an-alternative-compatible-with-ie10

标签

html

css

html5

css3

internet-explorer-10