0

所以我的 CSS 中有以下行：

-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/表示避免使用 box-reflect - 但该功能的最后一次更新是一年多前。

查看http://www.xhtml-lab.com/css/create-reflection-effect-using-css3显示了 box-reflect 的替代方案，但看起来并不优雅，作者在文章末尾说该解决方案不适用于 IE，并且她自己正在寻找更好的解决方案。那个已经两岁多了。

检查http://caniuse.com表明 IE 根本不支持 box-reflect - 这并没有让我充满希望。但是我找不到日期，因此为了讨论而假装它已经过时了:-p。

4

1 回答 1

0

到目前为止，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-06T04:36:40.320 回答