css box shadow on a div container cut off

edit: more general question: I like the box-shadow on divs, however when I place a div directly below the box-shadow'd div, that bottom part of the shadow doesn't overlay on top despite messing with z-indexes. So it seems like box-shadow cannot overlay another div? Any ideas would be great!

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

original question- I am using blueprint for a layout. This means there's a .container of 950px which then contains a #content.

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

In this case the #content fills the whole container so is also 950px.

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

I would like to have a drop shadow on the #content, but the problem is the shadow gets cut off since there is no space left to see it in the .container.

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

A workaround would be to decrease the width of the #content but that messes up the layout positionings I already have, and it looks too narrow.

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

Is there a way to get the box shadow to kind of ignore the parent container and appear over it? This isn't blueprint specific I guess, but that's the context. thanks!

有没有办法让盒子阴影忽略父容器并显示在它上面?我猜这不是蓝图,但那是上下文。谢谢!

EDIT:

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 is directly in .container. If I put a drop shadow on #content you can't see it until I shrink the width, which messes with the inside elements.

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

4 个解决方案

#1

I would add some padding to the .container element and ensure that your #content stays at the width you need.

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

#2

You don't need the overflow: hidden on the .container, since you already use clear fix on it. So, you can just throw it away: http://jsfiddle.net/kizu/gDXLf/

你不需要溢出:隐藏在.container上,因为你已经使用了明确的修复。所以,你可以扔掉它:http://jsfiddle.net/kizu/gDXLf/

#3

You could make the .container wider (960 is perfectly acceptable for a fixed width) and keep the #content centered inside the .container. Does that mess up anything for you?

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

#4

It all depends what you are trying to achieve.

这一切都取决于你想要实现的目标。

I was having difficulty with an inline-block group of list items. The right shadow was cut off by the list item next to it upon hover

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

A simple hack is to just add the following to the element:

一个简单的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

Although, this may only work for specific scenarios. I have only tested it on my example above.

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

#1