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

Question

我试图在一个简单的盒子上实现内阴影效果,如: alt text http://gotinsane.com/test.jpg

绿色框是另一个框内的内容.

我的问题是,如果我给内容框任何类型的背景,外框盒阴影效果消失!

这里有一个我的问题的例子(有标记和css),我已经设置内容高度较小以证明问题 - 我真的不关心IE*,这只是一个测试.

任何的想法？

UPDATE

盒子里面的内容有点像幻灯片,这里是一个例子(原始问题).thirtydot的答案可以解决这个问题,但它迫使我做一点点破解,根据内容改变包装器背景:这里的例子(thirtydot trick).

这可以是一个解决方案,但我不喜欢它太多,仍然不明白为什么外框阴影得到内框背景(颜色,图像)

更新2

谈到另一个论坛上这个问题,我发现了另一种方式:基本上,而不是用box-shadow在包装,将作为一个面具,我使用box-shadow并border-radius直接对内容(.step元素)然而,"面具"效果正是我我试图完成,所以这不是解决方案.

我仍然不明白内部元素背景如何以及为什么干扰外部元素设计,或者为什么从外部元素掉落的阴影落在内部元素后面.这可能是一个css bug吗？

UPDATE3

有人在mozilla上打开了一个bug,得到了这个澄清"问题"的答案:

来自http://www.w3.org/TR/css3-background/#the-box-shadow:

在堆叠上下文和绘制顺序方面,元素的外部阴影直接绘制在该元素的背景下方,元素的内部阴影直接绘制在该元素的背景上方(在边框和边框图像下方,如果有的话).

特别是,元素的子元素的背景将绘制在嵌入阴影之上(实际上它们在元素本身的边框和背景之上绘制).

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

UPDATE4

Fabio A. 用css3pointer-events指出了另一个解决方案.看起来不错,也适用于IE8;)

Answer 1

由于我也遇到了这个问题而且我也没有看到这种行为正常,我在mozilla上提交了一个错误报告

我也可以在谷歌浏览器中重现这个问题,所以我想知道这是不是真的是一个错误.但它可能是.

编辑:

事实上,这不是一个错误,而是它的工作方式.所以,根据这些信息,我分解了你的jfiddle例子并提出了这个解决方案:

标记现在看起来像这样:

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

掩码成为另一个div,它通过绝对定位分层在#box_content之上.这是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%;
}