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

发布于 2024-12-04 13:01:43 字数 993 浏览 5 评论 0原文

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

原文

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!

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

In this case the #content fills the whole container so is also 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.

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红衣飘飘貌似仙 2024-12-11 13:01:43

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

回复收藏 0 原文

桃扇骨 2024-12-11 13:01:43

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

回复收藏 0 原文

毁我热情 2024-12-11 13:01:43

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

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

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

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

工作示例

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

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:

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.

回复收藏 0 原文