Установите высоту и ширину отдельно для теней коробок?

Question

Мне нужно создать div, который содержит динамическое количество контента с тень коробки с обеих сторон и снизу, верх не имеет. Мне также нужна тень по сторонам, чтобы резко появиться немного вниз по div, и ни одна из теней не накладывается друг на друга, которая темнеет в тени конкретной области.
Пример здесь:
http://jsfiddle.net/EdwardG_Jones/TBfWm/

Я попытался следующим способом, который работает, однако он не охватывает углы и не является мгновенным переходом, а постепенный, как градиент выцветает:
http://jsfiddle.net/EdwardG_Jones/WC2ja/2/

box-shadow: 12px 5px 5px -10px rgba(50, 50, 50, 0.75), -12px 5px 5px -10px rgba(50, 50, 50, 0.75), 0 7px 5px -5px rgba(50, 50, 50, 0.75); 

Я, вероятно, в конечном итоге, используя изображение для нижнего градиента и каким-то образом создать другой DIV, который сидит на вершине тени в верхней части, чтобы скрыть это, не скрывая содержимое. Не знаю, как я это сделаю. Особенно в drupal, что означает, что его сложнее вручную жестко закодировать divs.

Answer 1

ИЛИ сделайте все, что вам нужно, чтобы нижняя, левая и правая границы выглядели правильно, а затем просто скройте верхнюю границу с помощью этого взломанного кода:

div{ 
    margin: 20px; 
    width: 200px; 
    height: 400px; 
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75) 
} 
div:before{ 
    content: ""; 
    width: 200px; 
    height: 5px; 
    background: white; 
    position: absolute; 
    margin-top: -6px; 
} 

Fiddle.

Тогда чувствую себя действительно виноватым в использовании.