分别为箱阴影设置高度和宽度？

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中，意味着更难以手动硬编码div。

Answer 1

或者做任何你需要做的事情，让底部，左右边框看起来正确，然后用这个hacky代码隐藏顶部边框：

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

然后对使用它感到非常内疚。