0

特定の要素に対して動作するように書かれたボックス シャドウがあり、Chrome では正常に動作しますが、Firefox と Internet Explorer では動作しません。私のウェブサイトには 3 つの div (ヘッダー、本文、フッター) があり、それらは Chrome と Firefox の両方で他の 2 つの問題なく機能します。

これが私のコードです：

#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; 
}
4

2 に答える 2

2

あなたの box-shadow はblur、最後の宣言で負の値を使用しています。何か不足していて、負のぼかしをスプレッドとして使用したいですか?

Firefox は負のぼかしをサポートしていないと思いますが、これは正当なようです。これは意味がないためです。

これを試してください（プレフィックス付きのバージョンにも適用することを忘れないでください）：

box-shadow: 6px 0 6px -4px #222, -6px 0 6px -4px #222, 0 6px 0 -4px #222;
于 2012-05-23T21:42:36.140 に答える
0

これを試してみてください。これは Firefox と Ie9 で動作します

-moz-box-shadow:10px 10px 5px #000000;
-webkit-box-shadow:10px 10px 5px #000000;
box-shadow:10px 10px 5px #000000;
于 2012-05-24T07:05:02.623 に答える