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

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

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

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

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


css dropshadow
person nonopolarity    schedule 12.11.2010    source источник
comment
Я думаю, что этот эффект просто естественный. При освещении объекта тень тем больше, чем больше объект. Когда он просто очень тонкий, тень становится светлее (или полностью исчезает).   -  person poke    schedule 12.11.2010

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

person serraosays    schedule 12.11.2010