为什么背景会破坏盒影插入效果？

Question

我正在尝试在一个简单的盒子上实现阴影效果，就像这样：alt text http://gotinsane.com/test.jpg

其中绿色框是另一个框内的内容。

我的问题是，如果我给内容框提供任何背景，外部框的阴影效果就会消失！

[Here an example of my problem（带有标记和CSS），我将内容高度设置得较小以证明问题所在-atm我真的不在乎IE *，这只是一个测试。

任何想法？

UPDATE

[框内的内容是一种幻灯片here an example (original problem)。fiftydot的答案可以解决这个问题，但它迫使我作一些改动，更改了内容功能的包装器背景：example here (thirtydot trick)。

这可能是一个解决方案，但我不太喜欢它，但仍然不明白为什么外框阴影在内框背景后面（颜色，图像）

UPDATE 2

[在另一个论坛上讨论此问题，我found another way：基本上，我将在内容上直接使用box-shadow和box-shadow，而不是在包装程序上使用border-radius，它会充当遮罩。 ]元素）但是，“遮罩”效果正是我想要达到的效果，因此这也不是解决方案。

我仍然不了解内部元素背景如何以及为何干扰外部元素设计，或者为什么从外部元素上掉下的阴影落在内部元素后面。这可能是CSS错误吗？

UPDATE3

有人打开了.step，并得到了可以解决“问题”的答案：

来自bug on mozilla：

关于堆叠上下文和绘画顺序，元素直接绘制在该元素的背景下方，并且元素的内部阴影在背景的正上方绘制该元素（在边框和边框图像下方，如果有的话）。

特别是元素children的背景将绘制在上方插图阴影（实际上，它们在边框和背景之上绘制元素本身）。

因此渲染正是规范所要求的。

UPDATE4

Fabio A.指出了另一种解决方案，http://www.w3.org/TR/css3-background/#the-box-shadow。看起来不错，也可以在IE8上工作；）

Answer 1

由于我也遇到了这个问题，而且我也看不到这种现象是正常的，所以我提交了错误报告with css3 pointer-events

不过，我也可以在Google Chrome浏览器中重现该问题，所以我想知道这是否真的是一个错误。但这可能是。

编辑：

实际上，这不是bug，而只是它的工作方式。因此，基于此信息，我以pointer-events为例，提出了以下解决方案：

标记现在看起来像这样：

over at mozilla

遮罩变成另一个div，通过绝对定位，它位于#box_content的顶部。这是CSS：

forked your jfiddle

Answer 2

我有点困惑您实际上想要什么。如果不太正确，请告诉我：）

这是我最好的猜测。

<div id="box">
    <div id="wrapper">
        <div id="box_content">
            Content here
        </div>
        <div id="mask"></div>
    </div>
</div>

CSS：（（我在供应商前缀规则中添加了。）

#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    pointer-events: none; /* to make clicks pass through */

    box-shadow: 0 0 10px #000000 inset;
}
#box_content{
    background-color: #0ef83f;
    height: 100%;
}

HTML：

Live Demo

Answer 3

问题是分层的重叠，可以使用边距或填充来避免它。尝试

#box {
    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;

    width: 280px;
    height: 280px;
    padding: 10px
}

#wrapper {
    background-color: #0ef83f;

    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: inset 0px 0px 18px #000;
    -moz-box-shadow: inset 0px 0px 18px #000;
    box-shadow: inset 0px 0px 18px #000;

    width: 240px;
    height: 240px;
    padding: 20px
}

<div id="box">
    <div id="wrapper">
        Content here
    </div>
</div>

Answer 4

检查此小提琴：http://jsfiddle.net/pramendra/FEk3c/5/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0px;
}


#wrapper{
    display:inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
      box-shadow:inset 0 0 10px 0 #000000;
        margin: 10px;
}

#box_content{
    background-color: #f00;
    margin:5px;
}

Answer 5

只需确保通过http://jsfiddle.net/FEk3c/6/，

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0;
}

#wrapper{
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
    margin: 10px;
}
#box_content{
    background-color: #0ef83f;
    height: 100px;
}

指定了子背景属性。

[给父母一个rgba，以防止下面的任何东西显示出来。

like in this fiddle

Answer 6

这对我非常有用，不需要任何其他DOM元素（例如'wrapper'等）：

background-color

}