Как использовать CSS box-shadow или -moz-box-shadow для создания тени для div с высотой 0? - PullRequest
Новая
       14

Как использовать CSS box-shadow или -moz-box-shadow для создания тени для div с высотой 0?

0 голосов
/ 12 ноября 2010

Если высота div равна 10px, то тень в порядке:

http://jsfiddle.net/m3KYB/6/

но если высота изменяется на 1px или 0, то тень не имеет хорошего размытия и является однородной по цвету, а также более светлой (как в Firefox, так и в Chrome)

Его можно взломать, используя высоту 10px вместе с margin-top: -10px, но иногда может быть «дополнительная тень» вокруг левой и правой стороны «поддельной» коробки 10px ... и что более стандартный способ сделать это без использования хака?

1 Ответ

1 голос
/ 12 ноября 2010

Я немного поэкспериментировал с вашим образцом кодирования, и вы правы, он постепенно становится легче. В хроме тень странно становится светлее с каждым шагом, который вы совершаете из height:5px;. То же самое в ФФ. Я сделал пару снимков экрана и посмотрел на цвет, ближайший к нижней части div в тени с фотошопом. Вот результаты: 

height:5px; - #b5b5b5  
height:4px; - #c0c0c0  
height:3px; - #cccccc  
height:2px; - #d8d8d8  
height:1px; - #e3e3e3  
height:0px; - #eeeeee

Эффект должен начинаться даже раньше, чем 5px, потому что этот первый цвет @ 5px значительно светлее, чем в вашем CSS. Самый простой эффект - просто понизить цвет на 10% темнее для каждого пикселя, который вы уменьшаете. Это должно визуально исправить это.

Что я думаю, что происходит? Когда вы делаете div в 5px, точка, в которой браузер запускает часть градиента тени # 888, слишком мала для точного отображения. Возможно, он начинает тень с середины 5-пиксельной высоты (за окном просмотра), а всего 7-8 пикселей недостаточно места, чтобы сойти с серого, такого темного, как # 888. Бьюсь об заклад, вы бы увидели большое время Таким образом, браузер перекрывает эту потенциальную ловушку, приглушая цвет до некоторой степени.

Это странно, но это происходит как в FF, так и в Chrome, поэтому я поспорил со своей частью спецификации W3C о том, как тени должны деградировать. Я не уверен, что это правильный ответ, но это лучший ответ, который я мог придумать. Это было в FF 3.6.12 и Chrome 7.0.517.44 на OSX 10.6.4.

...