1

我需要创建一个 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 更加困难。

4

1 回答 1

3

或者做任何你需要做的事情，使底部、左右边框看起来正确，然后用这个 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;
}

小提琴。

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

于 2013-09-23T12:20:57.817 回答