Question

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

原始问题 - 我正在使用蓝图进行布局。这意味着有一个950px的.container，然后包含#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保持所需的宽度。

Answer 2

您不需要overflow: hidden上的.container，因为您已经使用了明确的修复程序。所以，你可以扔掉它：http://jsfiddle.net/kizu/gDXLf/

Answer 3

你可以使.container更宽（960对于固定宽度是完全可以接受的）并保持#content在.container中居中。这会给你带来什么困扰吗？

Answer 4

这完全取决于你想要实现的目标。

我对列表项的内联块组有困难。悬停时，右侧阴影被旁边的列表项切断

一个简单的hack就是将以下内容添加到元素中：

li:hover {
    transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
}

<强> WORKING EXAMPLE

尽管如此，这可能仅适用于特定场景。我只在上面的例子中测试过它。

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

4 个答案: