我试图在一个简单的盒子上实现内阴影效果,如: 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;)
