У меня есть нижний колонтитул на моем веб-сайте, и я бы хотел, чтобы над ним была тонкая тень. 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/
Попробуйте box-shadow: 0px -7px 7px -7px #333;.
Четвертое значение - это распространение тени. Отрицательные значения уменьшают тень. В сочетании с размытием создается тень с тем же размером, что и элемент, который затем offset-y переходит в режим просмотра.