CSS box shadow top-only в Mozilla?

Question

У меня есть нижний колонтитул на моем веб-сайте, и я хотел бы, чтобы над ним была тонкая тень.CSS выглядит следующим образом:

div.footer {
  -webkit-box-shadow: 0px 0px 7px $dark2;
  -moz-box-shadow: -7px 0px 7px $dark2;
  box-shadow: 0px 0px 7px $dark2;
}

Поскольку я уверен, что вы все знакомы, Mozilla расширяет страницы, чтобы отобразить полный экстент тени блока, что является проблемой, если у вас есть элементы, расширяющие 100%широкий, такой как мой нижний колонтитул.

Я уже настроил декларацию moz для предотвращения горизонтальных полос прокрутки (я также сделал это на своей строке меню на моем сайте), но когда я надел это на свой нижний колонтитул, я нашелчто Mozilla теперь расширяет страницу на 7px за нижний колонтитул внизу.Я был удивлен этим, потому что он не расширяет страницу вертикально выше строки меню в верхней части страницы ...

Итак, есть ли у кого-нибудь решение для рендеринга прямоугольника только для верхней части?тень в Firefox?

РЕДАКТИРОВАТЬ: см. скрипку этого в: http://jsfiddle.net/burlesona/2LwXa/

Answer 1

Попробуйте box-shadow: 0px -7px 7px -7px #333;.

Четвертое значение - это распространение тени.Отрицательные значения приводят к уменьшению тени.В сочетании с размытием получается тень того же размера, что и элемент, который затем offset-y перемещается для просмотра.