Сужается / исчезает тень от CSS?

У меня есть раскрывающееся меню CSS, которое я пытаюсь создать, а фон выпадающего меню имеет затененную / сужающуюся тень блока:

enter image description here

У меня возникли проблемы с тем, как сделать так, чтобы тень от коробки на самом деле сужалась / исчезала.

Вот где я сейчас нахожусь:http://jsfiddle.net/Shpigford/f9aKR/

Я пытался использовать:before а также:after псевдо-селекторы, между прочим, но не вполне могут сделать это правильно.

For clarification, I'm specifically only needing help with the shadow on the drop down. My jsFiddle is a stripped down version to keep the example as straightforward as possible.

 Diodeus - James MacFarlane07 июн. 2012 г., 21:21
Выглядит блекло для меня.
 thirtydot07 июн. 2012 г., 21:46
Просто чтобы прояснить, вы довольны нижней частьюbox-shadow, но вам бы хотелось, чтобы левая и правая части исчезали?
 Shpigford07 июн. 2012 г., 21:47
@thirtydot Правильно ... верхняя часть тени должна постепенно исчезать.
 Shpigford07 июн. 2012 г., 21:25
Это не так. Это просто смещение. Посмотрите внимательно. :) Изображение в примере постепенно исчезает, а CSS в моем jsFiddle просто затушевывает величину радиуса тени.

Ответы на вопрос(1)

Решение Вопроса
I've added a before element. gave it a gradient background (from transparent to a semi transparent black) to achieve the top to bottom fade. gave it an inset box shadow to achieve the in -> outfade.

Посмотрите - & gt;http://jsfiddle.net/f9aKR/22/

Отредактируйте количество затухания / цвета, как вы хотите.

 Shpigford08 июн. 2012 г., 20:07
Трепет. Немного. Шутки в сторону.
 12 июн. 2012 г., 02:36
Спасибо;) Рад, что помог.

Ваш ответ на вопрос