Css box-shadow在firefox中不起作用

Question

为什么这个方框阴影在firefox中不起作用..但它在chrome中显示阴影..

    #slideshow { 
        margin: 80px auto; 
        position: relative; 
        width: 701px; 
        height: 321px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }

    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }

我也给了重要但不是工作..我正在使用jquery滑块来实现这一点。所以我认为html的结构在某种程度上搞乱了定位。

任何想法..

谢谢！

Answer 1

Hi应用于浏览器工具包，如下所示

firefox and chrome

-

-moz-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
box-shadow: 0 0 20px rgba(0,0,0,0.4);

Answer 2

您应该为此使用浏览器供应商前缀。使用CssPrefixer http://cssprefixer.appspot.com/

Answer 3

对所有浏览器都可用：

box-shadow: 0 0 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.4);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.4);