为什么一个背景破箱阴影插图的影响？ [英] Why does a background break a box-shadow inset effect?
问题描述
我试着去实现一个简单的盒子内阴影效果，是这样的：
Im trying to achieve an inner-shadow effect on a simple box, something like:
其中，绿盒子里面是另一个框的内容。
where the green box is the content inside another box.
我的问题是，如果我给内容框任何一种背景下，外箱箱阴影效果消失！
My problem is that if i give the content box any kind of background, the outer box box-shadow effect vanish!
这里我的问题（有标记和CSS）的例子，我给自己定的内容高度较小以证明问题 - 大气压我真的不关于IE *照顾，这仅仅是一个测试
Here an example of my problem (with markup and css), i've set the content height smaller to evidence the problem - atm i really dont care about IE*, this is just a test.
任何想法？
更新
盒子里面的内容是一个有点那种滑动的，这里一个例子（原题）。
thirtydot的回答是卓有成效的，但它迫使我作出的黑客工具，改变包装背景内容的功能：在这里例如（thirtydot绝招）。
The content inside the box is a somewhat kind of slide, here an example (original problem). thirtydot's answer does the trick, but it forces me to make a little hack, changing the wrapper background in function of the content: example here (thirtydot trick).
这可能是一个解决方案，但我不喜欢太多，仍然不明白为什么外盒影子得到内盒背后的背景（颜色，图像）
This can be a solution, but i dont like it too much and still dont understand why the outer box shadow get behind the inner box background (color, image)
更新2
说到另一个论坛上这个问题，我找到另一种方式：基本上，而不是使用箱阴影的包装，这将作为一个面具，我用的box-shadow 和边界半径直接对内容（ .STEP 元素）
然而，面具的效果正是我试图完成，所以这个心不是该解决方案也没有。
Talking about this problem on another forum, i found another way: basically, instead of use box-shadow on the wrapper, that will act as a mask, I use box-shadow and border-radius directly on the content (.step elements)
However, the 'mask' effect is exactly what i was trying to accomplish, so this isnt the solution neither.
<击>我还是不明白如何以及为什么内部元件的背景干扰的外部元件设计，或为何黑影从外部元素降至让内层的后面。难道这是一个CSS错误？
UPDATE3
有人打开了Mozilla浏览器上的一个 错误，并得到了这个答案clearify问题：
Someone opened a bug on mozilla, and got this answer that clearify the 'problem':
从<一个href=\"http://www.w3.org/TR/css3-background/#the-box-shadow\">http://www.w3.org/TR/css3-background/#the-box-shadow
在堆叠内容和绘画次序，一个企业的外部阴影条款
元素绘制紧接该元素的背景下，并且
一个元件的内阴影的背景之上立即抽
该元素（下面的边界和边界图像，如果有的话）。
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).
在特别的的孩子的背景中的元素将上面作画
插图阴影（事实上他们画的边框和背景之上
该元件本身）。
In particular, the backgrounds of children of the element would paint above the inset shadow (and in fact they paint above the borders and background of the element itself).
所以渲染是完全规范要求的东西。
So the rendering is exactly what the spec calls for.
UPDATE4
A.法比奥指出了另一种解决方案，使用CSS3 指针事件 。
看起来不错，也对IE8的工作;）
Fabio A. pointed out another solution, with css3 pointer-events.
Looks good and works on IE8 too ;)
推荐答案
由于我有过这个问题，我也没有看到这种现象是正常的，我提交了一份bug报告的over Mozilla的
Since I am having this problem too and I too don't see this behaviour being normal, I filed a bug report over at mozilla
我可以重现在谷歌浏览器的问题太多了，所以我不知道这是否真的是一个错误。但它可能是
I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.
编辑：
事实上，这不是一个错误，但现在的样子它的意思工作。因此，该信息的基础上，我分叉的jfiddle 的实例，并与该溶液想出：
Indeed it's not a bug, but just the way it's meant to work. So, on the basis of this information, I forked your jfiddle example and came up with this solution:
的标记，现在看起来是这样的：
The markup now looks like this:
<div id="box">
<div id="wrapper">
<div id="box_content">
Content here
</div>
<div id="mask"></div>
</div>
</div>
掩模变为另一个div，这是由被绝对定位装置上#box_content一个顶部分层。这是CSS：
The mask becomes another div, which is layered on top of the #box_content one by means of being absolutely positioned. This is the 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%;
}
这篇关于为什么一个背景破箱阴影插图的影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
