为什么背景会破坏盒子阴影插入效果? [英] Why does a background break a box-shadow inset effect?

问题描述

我试图在一个简单的盒子上实现内阴影效果，例如:替代文字 http://gotinsane.com/test.jpg

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!

这是我的问题的一个例子(带有标记和 css)，我将内容高度设置得更小以证明问题 - atm 我真的不关心 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.

有什么想法吗?

更新

框内的内容有点像幻灯片，这里是一个例子(原始问题).三十点的答案可以解决问题，但它迫使我做一些小技巧，改变内容功能中的包装器背景:这里的示例(三十点技巧).

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 在包装器上，它将充当掩码，我直接在内容上使用 box-shadow 和 border-radius (.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 错误吗?

更新3

有人打开了 mozilla 上的错误，得到了解决问题"的答案:

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

来自 http://www.w3.org/TR/css3-background/#盒子阴影 :

就堆叠上下文和绘制顺序而言，元素被绘制在该元素背景的正下方，并且元素的内部阴影直接绘制在背景的上方该元素(在边框和边框图像下方，如果有的话).

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).

特别是，元素的 children 的背景会在上面绘制嵌入的阴影(实际上它们画在边框和背景之上元素本身).

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. 指出了另一个解决方案，使用 css3 pointer-events.看起来不错，也适用于 IE8 ;)

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

推荐答案

因为我也有这个问题，我也觉得这种行为不正常，所以我提交了一个错误报告 在 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

不过，我也可以在 Google Chrome 中重现该问题，所以我想知道这是否真的是一个错误.但也有可能.

I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.

确实，这不是一个错误，而是它的工作方式.因此，根据这些信息，我 fork your 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屋！