CSS коробчатая тень в Firefox показывает слабую верхнюю границу/тень

Question

Я настроил пример, который иллюстрирует мой вопрос: http://jsfiddle.net/XZeYK/5/

При просмотре этого в Chrome, это хорошо. Однако Firefox добавляет нежелательную границу в верхнюю часть элемента #navigation. Я могу избавиться от него, установив отрицательный радиус распространения, но тогда это закручивает мои закругленные углы.

Любые идеи?

Спасибо, Monty

Answer 1

Привет на самом деле его из-за коробчатой ​​тенью, как вы определили, так что я просто уменьшил значение размытости вашей коробчатые теневой собственности и ее теперь работает отлично.

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'); 
} 

я надеюсь, что это поможет вам увидеть демо: -

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

И есть пять значений коробчатого теневой собственности, как мы можем определить : -

AS Пример: -moz-box-shadow: 3px 3px 5px 6px #ccc;

1. Горизонтальное смещение тени, позитив означает, что тень будет находиться справа от поля, отрицательного смещения положит тень на левой стороне коробки.

2. Вертикальное смещение тени, отрицательное означает, что тень окна будет над полем, положительный означает, что тень будет ниже поля.

3. Радиус размытия (по желанию), если установлено значение 0, тень будет острой, чем выше число, тем более размытым будет.

4. Радиус распространения (по желанию), положительные значения увеличивают размер тени, отрицательные значения уменьшают размер. Значение по умолчанию равно 0 (тень такого же размера, как размытие).

5. Цвет

Answer 2

Вот скрипка:

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

Изменить это теневая класс:

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

И я думаю, что нет никакой необходимости Мозиллы или WebKit связанных с CSS.

Answer 3

Я в конечном итоге будет следующим для класса .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 расширения необходимы для поддержки старых версий.Размер окна сменился моим фактическим приложением, поэтому я оставил их такими, какими они есть (так опускали эти правила).

Я буду отмечать как принятые, так и вы оба помогли мне.

Спасибо, Monty