div容器上的css框阴影被切断

Question

编辑:更一般的问题:我喜欢div上的box-shadow,但是当我将div放在box-shadow'd div的正下方时,阴影的底部部分尽管与z-index相混淆但不会叠加在顶部.所以看起来盒子阴影不能覆盖另一个div？任何想法都会很棒!

原始问题 - 我正在使用蓝图进行布局.这意味着有一个.container 950px然后包含一个#content.

在这种情况下,#content填充整个容器也是如此950px.

我想在它上面有一个投影#content,但问题是阴影被切断了,因为没有空间可以看到它.container.

一种解决方法是减小宽度,#content但会影响我已经拥有的布局位置,并且看起来太窄了.

有没有办法让盒子阴影忽略父容器并出现在它上面？这不是我猜的蓝图,但那是上下文.谢谢!

编辑:

body .container {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
body .container:after {
    clear: both;
    content: "";
    display: table;
}
#content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 950px;
    box-shadow: 0 0 4px black;
    -moz-box-shadow: 0 0 4px black;
}

#content是直接的.container.如果我放一个阴影,#content你就看不到它,直到我缩小宽度,这与内部元素混淆.

Answer 1

我会向元素添加一些填充.container，并确保您#content保持所需的宽度。