alt text http://gotinsane.com/test.jpg
其中绿色框是另一个框内的内容。
我的问题是，如果我给内容框任何种类的背景，外箱盒阴影效果消失！
Here an example of my problem(使用标记和css)，我设置的内容高度较小，以证明问题 – atm我真的不在乎IE *，这只是一个测试。
任何想法？
UPDATE
盒子里面的内容是有点幻灯片，here an example (original problem)。
三十点的答案是诀窍，但它强制我做一个小黑客，改变内容功能的包装背景：example here (thirtydot trick)。
这可以是一个解决方案，但我不喜欢它太多，仍然不明白为什么外盒阴影落后于内盒背景(颜色，图像)
更新2
在另一个论坛上讨论这个问题，我found another way：基本上，在包装器上使用Box-shadow，这将作为一个掩码，我直接在内容(.step元素)上使用Box-shadow和border-radius，
然而，“面具”的效果正是我想要完成的，所以这也不是解决方案。
我仍然不明白内部元素背景如何干扰外部元素设计，或者为什么阴影从外部元素掉落到内部元素之后。这可能是一个css bug吗？
UPDATE3
有人开了一个bug on mozilla，得到了这个答案，清楚了“问题”：
From 07006 :
In terms of stacking contexts and the painting order,the outer shadows of an
element are drawn immediately below the background of that element,and the
inner shadows of an element are drawn immediately above the background of
that element (below the borders and border image,if any).
特别是，元素的孩子的背景将在上面绘制
插入阴影(实际上它们画在边框和背景之上
元素本身)。
所以渲染正是这个规范所要求的。UPDATE4
法比奥A.指出另一个解决方案，with css3
pointer-events。
看起来不错，也适用于IE8;)
解决方法
不过，我也可以在Google Chrome中重现问题，所以我想知道这是否真的是一个错误。但可能是。
编辑：
事实上，这不是一个错误，而只是它的工作方式。所以，在这个信息的基础上，我@L_301_8@的例子想出了这个解决方案：
标记现在看起来像这样：
<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%;
}
