为什么背景打破了盒阴影嵌入效应？ [英] Why does a background break a box-shadow inset effect?

问题描述

我试图在一个简单的盒子上实现内部阴影效果，像：
alt text http：// gotinsane。 com / test.jpg

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

我的问题是，如果我给内容框任何种类的背景，外框框阴影效果消失！

这里的我的问题的一个例子（与markup和css），我已经设置内容高度更小，以证明问题 - atm我真的不关心IE *，这只是

$ b
$ b

框中的内容是一种幻灯片，这里的例子（原始问题）。
thirtydot的答案有点窍门，但它强迫我做一点点黑客，改变封装的背景功能的内容：示例

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

UPDATE 2

问题在另一个论坛上，我找到另一种方式：基本上，而不是使用 box-shadow 在包装器上，这将作为一个掩码，我使用 box-shadow 和 border-radius 直接对内容（ .step 元素）
然而，'mask'效果正是我想要完成的，所以这个is not解决方案。 / p>

我还是不明白内部元素背景如何和为什么会干扰外部元素设计，或者为什么从外部元素丢弃的阴影落在内部一。这是一个css错误吗？

UPDATE3

打开了 mozilla上的错误，并得到了澄清问题的答案：

从 http：/ /www.w3.org/TR/css3-background/#the-box- shadow ：

在堆叠方面上下文和绘制顺序，
元素的外阴影被绘制在该元素的背景的紧下方，并且元素的
内阴影被绘制在紧挨着
的背景之上的那个元素（在边框和边框图像下面，如果有的话）。

特别地，元素的 children 背景将会在
之上（事实上​​，它们在元素本身的边框和背景上绘制元素本身）。

所以渲染正是spec所要求的。

UPDATE4

Fabio A.指出了另一种解决方案，使用css3 指针事件 。
看起来不错，在IE8上也有效;）

解决方案

因为我也有这个问题，看到这种行为正常，我提交了一个错误报告在mozilla

我可以在Google Chrome中重现这个问题，不过，我想知道这是否真的是一个错误。

确实，这不是一个错误，但只是它的工作方式。因此，根据这些信息，我派发您的jfiddle 示例，并提出了此解决方案：

标记现在看起来像这样：

 < div id = > 
< div id =wrapper> 
< div id =box_content> 
此处的内容
< / 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; / *让点击通过* / 
 
 box-shadow：0 0 10px＃000000 inset; 
} 
 #box_content {
 background-color：＃0ef83f; 
 height：100％; 
} 
  

Im trying to achieve an inner-shadow effect on a simple box, something like: alt text http://gotinsane.com/test.jpg

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!

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.

Any idea?

UPDATE

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)

UPDATE 2

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.

I still don't understand how and why an inner element background interfere with an outer element design, or why the shadow dropped from the outer element get behind the inner one. Could this be a css bug?

UPDATE3

Someone opened a bug on mozilla, and got this answer that clearify the 'problem':

From 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

Fabio A. pointed out another solution, with css3 pointer-events. Looks good and works on IE8 too ;)

解决方案

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.

edit:

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>

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屋！