CSS盒阴影的div容器切断

编辑：更一般的问题：我喜欢div-box的阴影，但是当我将div放在box-shadow'd div的正下方时，影子的底部部分尽管与z索引混淆，但不会覆盖顶部。所以它看起来像箱子阴影不能覆盖另一个div？任何想法都会很棒！CSS盒阴影的div容器切断

原question- 我用的蓝图布局。这意味着有一个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上投下阴影，直到缩小宽度（与内部元素混淆）时才能看到它。

来源

2011-09-14 butterywombat

你可以包括一个jsFiddle，以便我们可以看到有什么限制或限制。我有一些想法，但取决于你必须使用什么，他们可能会或可能不会工作。 – FreeSnow

你如何生成阴影？（我认为默认情况下CSS容器阴影不会被父容器修剪？）我们可以看到一些代码吗？ –

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

来源

2011-09-14 12:30:35

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

你可以使.container更宽（960为固定宽度完全可以接受的），并保持内部.container居中＃内容。这会为你搞乱什么吗？

来源

2011-09-14 12:29:00

嗯我可以尝试一下，除了我使用指南针gem使蓝图与html更少内联。所以它混入它使得容器950默认 – butterywombat

你不需要在.container的overflow: hidden，因为你已经在使用它清晰的定位。所以，你可以把它扔掉：http://jsfiddle.net/kizu/gDXLf/

来源

2011-09-15 21:40:17 kizu

感谢您的提示 – butterywombat

这一切都取决于你想要达到的目的。

我在使用内嵌块组列表项时遇到了困难。正确的阴影是由列表项在悬停切断旁边

一个简单的黑客是刚刚添加以下元素：

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

虽然，这可能只适用于特定场景。我只在上面的示例中对它进行了测试。

来源

2014-07-14 02:56:49 Fizzix

CSS盒阴影的div容器切断

回答

相关问题