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;