CSS盒阴影在div容器上被截断

Question

编辑：更一般的问题： 我喜欢在 div 上使用 box-shadow，但是当我将一个 div 直接放在已经添加了 box-shadow 的 div 下面时，阴影的底部部分不会覆盖在顶部，尽管调整了 z-index。所以看起来 box-shadow 不能覆盖另一个 div？有什么想法吗？

原始问题- 我正在使用 blueprint 进行布局。这意味着有一个 .container 容器，宽度为 950px，其中包含一个 #content。

在这种情况下，#content 填充整个容器，因此也是 950px。

我想在 #content 上放置一个投影，但问题是在 .container 中没有剩余的空间可以显示它，所以阴影被截断了。

解决方法是减少 #content 的宽度，但这会破坏我已经设定好的布局位置，并且看起来太窄。

有没有办法让 box shadow 忽略父容器并出现在其上方？我想这不是特定于 blueprint 的问题，但这就是上下文。谢谢！

编辑：

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 上添加一个阴影效果，你只有在缩小宽度时才能看到它，这会影响内部元素。

- butterywombat

---

你能否包含一个 jsFiddle，这样我们就可以看到有哪些限制或限制。我有一些想法，但取决于你要使用什么，它们可能会起作用，也可能不会起作用。 - Freesnöw

你是如何生成阴影的？（我认为CSS box-shadow默认情况下不会被父容器裁剪？）我们能看到一些代码吗？ - Matt Gibson

Answer 1

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

- Jamie Dixon

---

嗯，我认为这可能是唯一的解决方案...如果没有其他人评论更新的代码，我会将其标记为答案... - butterywombat

Answer 2

一切取决于你想要实现什么。

我在处理一组inline-block列表项时遇到了困难。当鼠标悬停时，右侧阴影被相邻的列表项截断。

一个简单的技巧就是在元素中添加以下内容：

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);
} 

示例

但是，这种方法仅适用于特定的场景。我只在上面的示例中进行了测试。

- Fizzix

---

很酷，它能正常工作。感谢！ - Zhang Qun

Answer 3

你不需要在 .container 上使用 overflow: hidden，因为你已经在其上使用了清除浮动。所以，你可以把它直接删除：http://jsfiddle.net/kizu/gDXLf/。

- kizu

Answer 4

你可以将 .container 变得更宽（960 对于固定宽度来说是完全可以接受的），并保持 #content 居中在 .container 中。这样对你有什么影响吗？

- Jonathan Stegall

---

嗯，我可以尝试一下，但是我正在使用罗盘宝石使蓝图与HTML不再内联。因此，它附带的mixin默认使容器为950。 - butterywombat