-webkit-box-reflect in firefox和IE-CSS

时间:2012-09-22 16:26:59

标签: css firefox google-chrome webkit

我还不熟悉CSS中的Reflections等等,所以有一些问题。对于主页,我被告知我需要反映文本,然后是图像(以及背后的复杂阴影,但这是在我的待办事项列表中)。

对于chrome / safari(webkit)我有

  

-webkit-box-reflect:低于0px -webkit-gradient(线性,左上,左下,从(透明),颜色停止(70%,透明)到(rgba(255,255,255,0.2))) ;

看起来非常好......但是......显然它只适用于chrome / safari。我将如何在Internet Explorer(如果可能的话,7/8/9)和Firefox中获得相同的效果?

谢谢, 尼古拉斯卡特

2 个答案:

答案 0 :(得分: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);
}

What is -moz-element?

Reference

答案 1 :(得分:2)

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

本教程还讨论了cross-browser reflection


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

此版本:http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes会在您的网页no-cssreflections代码中添加<html>课程。

然后,您可以添加特定的CSS规则:

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

或通过JavaScript:

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