html - Firefox の CSS box-shadow で上部の境界線/影がかすかに表示される

Question

私の問題を説明する例を設定しました: http://jsfiddle.net/XZeYK/5/

これをChromeで表示すれば問題ありません。ただし、Firefox は #navigation 要素の上部に不要な境界線を追加します。負のスプレッド半径を設定することでそれを取り除くことができますが、これにより丸みを帯びた角が台無しになります.

何か案は？

ありがとう、モンティ

Answer 1

ここにフィドルがあります：

http://jsfiddle.net/XZeYK/15/

これをシャドウ クラスに変更します。

box-shadow: 1px 4px 4px -1px gray;

また、mozilla や webkit 関連の CSS は必要ないと思います。

Answer 2

.shadow クラスについては、次のようにしました。

box-shadow: 3px 4px 4px -2px gray;
-moz-box-shadow: 3px 4px 4px -2px gray;
-webkit-box-shadow: 3px 4px 4px -2px gray;
... <IE specific rules>...

古いバージョンをサポートするには、-moz および -webkit 拡張機能が必要です。ボックスのサイズ変更が実際のアプリを台無しにしたので、そのまま残しました（これらのルールを省略しました）。

あなたの両方が私を助けてくれたので、私は両方を承認済みとしてマークします。

ありがとう、モンティ

Answer 3

Hi actually its due to box-shadow as you defined so i just reduced the blur value of your box-shadow property and its working fine now.

CSS

.shadow {
    -moz-box-shadow: 0px 3px 4px -1px gray;
    -webkit-box-shadow: 0px 3px 4px -1px gray;
    box-shadow: 0px 3px 4px -1px gray;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#808080')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#808080');
}

i hope this will help you see the demo :-

http://jsfiddle.net/XZeYK/18/

And there are five values of box-shadow property as we can define :-

AS Example : -moz-box-shadow: 3px 3px 5px 6px #ccc;

1. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.

2. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.

3. The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

4. The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).

5. Color