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

【问题标题】：css box shadow on a div container cut offdiv容器上的css框阴影被切断
【发布时间】：2011-09-14 12:20:35
【问题描述】：

编辑：更一般的问题：我喜欢 div 上的 box-shadow，但是当我将 div 直接放在 box-shadow'd div 的下方时，尽管弄乱了 z-index，阴影的底部不会覆盖在顶部。所以看起来 box-shadow 不能覆盖另一个 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 上放置阴影，您将无法看到它，直到我缩小宽度，这会与内部元素混淆。

【问题讨论】：

您能否包含一个 jsFiddle，以便我们查看存在哪些限制或限制。我有一些想法，但取决于您必须使用的内容，它们可能有效，也可能无效。
如何生成投影？（我不认为 CSS box-shadows 默认会被父容器裁剪？）我们可以看看一些代码吗？

标签： css dropshadow

【解决方案1】：

这完全取决于您要达到的目标。

我在处理一组内联块列表项时遇到了困难。悬停时右侧的阴影被旁边的列表项切断

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

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

虽然，这可能只适用于特定场景。我只在上面的例子中测试过。

【讨论】：

【解决方案2】：

您不需要.container 上的overflow: hidden，因为您已经对其使用了clear fix。所以，你可以把它扔掉：http://jsfiddle.net/kizu/gDXLf/

【讨论】：

【解决方案3】：

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

【讨论】：

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

【解决方案4】：

您可以使 .container 更宽（对于固定宽度，960 完全可以接受）并保持 #content 在 .container 内居中。这对你有什么影响吗？

【讨论】：

hmm 我可以试试，除了我使用 compass gem 来减少蓝图与 html 的内联。所以它自带的mixin使得容器默认为950