Box Shadow在Chrome中工作，但在IE和Firefox中不能工作

Question

我有一个为某个元素编写的盒子阴影，它在Chrome中工作正常，但不适用于Firefox和Internet Explorer。我的网站有三个div（页眉，正文，页脚），并且可以同时适用于Chrome和Firefox。

这里是我的代码：

#footer { 
background-image:url(../../images/footer-extend.png); 
background-repeat: repeat-x; 
width: 960px; 
border-bottom: 1px solid black; 
border-left: 1px solid black; 
border-right: 1px solid black; 
overflow:hidden; 
padding-top: 35px; 
padding-left: 10px; 
padding-right: 10px; 
padding-bottom: 0px; 

margin:0 auto; 
margin-top: -10px; 
margin-bottom: 100px; 
/* BOX SHADOW */ 

-moz-box-shadow: 6px 0 6px -4px #222, -6px 0 6px -4px #222, 0px 6px -4px #222; 
-webkit-box-shadow: 6px 0 6px -4px #222, -6px 0 6px -4px #222, 0px 6px -4px #222; 
box-shadow: 6px 0 6px -4px #222 , -6px 0 6px -4px #222, 0px 6px -4px #222; 
} 

Answer 1

您的box-shadow使用在最后声明blur负值。你可能错过了一些东西，并希望使用消极的模糊作为传播？

我想Firefox不支持消极模糊，这似乎是合法的，因为这没有任何意义。

试试这个（记得把它应用到前缀的版本）中：

box-shadow: 6px 0 6px -4px #222, -6px 0 6px -4px #222, 0 6px 0 -4px #222; 

Answer 2

试试这个，这将工作在Firefox和IE9

-moz-box-shadow:10px 10px 5px #000000; 
-webkit-box-shadow:10px 10px 5px #000000; 
box-shadow:10px 10px 5px #000000;