Firefox 和 IE 中的 -webkit-box-reflect - CSS答案

【问题标题】：-webkit-box-reflect in firefox and IE - CSSFirefox 和 IE 中的 -webkit-box-reflect - CSS
【发布时间】：2012-09-14 18:21:42
【问题描述】：

我对 CSS 中的反射等还是很陌生，所以对此有些问题。对于主页，我被告知我需要反映文本，然后是图像（以及后面的复杂阴影，但这是我的待办事项列表）。

对于 chrome/safari (webkit) 我有

-webkit-box-reflect: 低于 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.2))) ;

看起来很不错...但是...显然它只适用于 chrome/safari。我将如何在 Internet Explorer（如果可能，7/8/9）和 Firefox 中获得相同的效果？

谢谢，尼古拉斯·卡特

【问题讨论】：

标签： css firefox google-chrome webkit

【解决方案1】：

您应该为 Firefox 使用 -moz-element 属性。

为了反思，它将是：

#reflection {
  /* It's a copy of the original element... */
  background: -moz-element(#reflected-element)
              bottom left no-repeat;

  /* ... turned upside down ... */
  -moz-transform: scaleY(-1);

  /* ... with a gradual fade-out effect towards the bottom. */
  mask: url(#reflection-mask);
}

What is -moz-element?

Reference

【讨论】：

【解决方案2】：

也许您可以使用 this plugin 提供 jQuery 后备。

本教程还讨论了cross-browser reflection。

要定位不支持反射的浏览器，您可以使用Modernizr。

此版本：http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes 将在您的页面 <html> 标记中添加一个 no-cssreflections 类。

然后，您可以添加特定的 CSS 规则：

.no-cssreflections #element-id {
    /* custom CSS rule */
}

或通过 JavaScript：

if(!Modernizr.cssreflections){
    /* run plugin or whatever */
}

【讨论】：