css - 分别为盒子阴影设置高度和宽度？

Question

我需要创建一个 div 来容纳动态数量的内容，两侧和底部都有一个框阴影，顶部没有。我还需要两侧的阴影在 div 下方稍微明显地出现，并且没有任何阴影相互重叠，从而使特定区域的阴影变暗。
此处示例:
http://jsfiddle.net/EdwardG_Jones/TBfWm/

我尝试了以下方法，该方法有效，但它不会覆盖 Angular 落，也不是即时过渡，而是随着渐变逐渐淡入而逐渐过渡:
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 .

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