logo标签列表

在Firefox和IE中使用-webkit-box-reflect - CSS

cssfirefoxgoogle-chromewebkit
6

我对CSS中的反射等内容还不太熟悉，所以遇到了一些问题。针对首页，有人告诉我需要反射文字和图片（还要加上一个复杂的阴影，但这在我的待办事项清单上）。

对于Chrome/Safari（Webkit），我已经得到了以下样式：

-webkit-box-reflect: below 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中获得相同的效果呢？

谢谢， Nicholas Carter

2个回答
4

对于 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);
}

-

-moz-element是什么？

参考资料

2
也许您可以使用这个插件来提供jQuery备选方案。

本教程还讨论了跨浏览器反射。

要针对不支持反射的浏览器，请使用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 */
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接