为什么背景会破坏盒子阴影插入效果？答案

【问题标题】：Why does a background break a box-shadow inset effect?为什么背景会破坏盒子阴影插入效果？
【发布时间】：2011-07-20 23:37:51
【问题描述】：

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

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

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

Here an example of my problem（带有标记和 css），我已将内容高度设置为较小以证明问题 - atm 我真的不关心 IE*，这只是一个测试。

有什么想法吗？

更新

框内的内容有点像幻灯片，here an example (original problem)。三十点的答案可以解决问题，但它迫使我做一些小技巧，改变内容功能的包装器背景：example here (thirtydot trick)。

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

更新 2

在另一个论坛上谈论这个问题，我found another way：基本上，我不是在包装器上使用box-shadow，而是作为掩码，我直接在内容上使用box-shadow和border-radius（@ 987654335@元素）然而，“面具”效果正是我想要实现的，所以这也不是解决方案。

我仍然不明白内部元素背景如何以及为什么会干扰外部元素设计，或者为什么从外部元素中掉落的阴影会落在内部元素的后面。这可能是一个 CSS 错误吗？

UPDATE3

有人打开了bug on mozilla，得到了解决“问题”的答案：

来自http://www.w3.org/TR/css3-background/#the-box-shadow：

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

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

所以渲染正是规范所要求的。

UPDATE4

Fabio A. 指出了另一个解决方案，with css3 pointer-events。看起来不错，也适用于 IE8 ;)

【问题讨论】：

你只是想要一些看起来像你的形象的东西？
是的 - 但内框背景应该与外框无关 - 因为它可以是所有内容、图像、颜色半径等。
你必须坚持你所拥有的。我tried this，但它无法使用，因为你不能点击内框阴影内的东西。我确实多次尝试找到一种方法来按照您的意愿进行操作，但我认为它不存在。我让你的修复版本稍微干净了一点：http://jsfiddle.net/sMDsX/11/ - 你不能传递任何东西给removeClass() 来删除所有类。
'我仍然不明白内部元素背景如何以及为什么会干扰外部元素设计' - 我想这是因为内部元素有效地绘制在其父元素之上（先绘制父级，然后在其上绘制子级）。通常这是直观的事情（例如，涂抹背景图像，在大胆的position:relative诡计上重叠边框角等）。因此，通过代理，您所期望的是边框阴影落在带边框的框上方的项目上。
我做了一个速写，一张图片值一千个字：pandora.pinkgothic.com/why-shadow.png - 非常夸张的 HTML 层的“侧面”可视化。 :)

标签： background shadow css

【解决方案1】：

问题是分层重叠，您可以使用边距或填充来避免它。尝试 http://jsfiddle.net/pramendra/FEk3c/5/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0px;
}


#wrapper{
    display:inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
      box-shadow:inset 0 0 10px 0 #000000;
        margin: 10px;
}

#box_content{
    background-color: #f00;
    margin:5px;
}

【讨论】：

【解决方案2】：

检查这个小提琴：http://jsfiddle.net/FEk3c/6/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0;
}

#wrapper{
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
    margin: 10px;
}
#box_content{
    background-color: #0ef83f;
    height: 100px;
}

【讨论】：

不-我需要具有不同背景的内盒和外盒-无论如何，这可能是一个解决方案（作为thirdydot的答案），我更新了我的问题。

【解决方案3】：

我有点困惑你到底在追求什么。如果不完全正确，请告诉我:)

这是我最好的猜测。

Live Demo

CSS：
（我在供应商前缀规则中添加了。）

#box {
    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;

    width: 280px;
    height: 280px;
    padding: 10px
}

#wrapper {
    background-color: #0ef83f;

    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: inset 0px 0px 18px #000;
    -moz-box-shadow: inset 0px 0px 18px #000;
    box-shadow: inset 0px 0px 18px #000;

    width: 240px;
    height: 240px;
    padding: 20px
}

HTML：

<div id="box">
    <div id="wrapper">
        Content here
    </div>
</div>

【讨论】：

【解决方案4】：

由于我也遇到了这个问题，而且我也认为这种行为不正常，所以我提交了一个错误报告 over at mozilla

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

编辑：

确实，这不是一个错误，而是它的工作方式。所以，基于这些信息，我forked your jfiddle 示例并想出了这个解决方案：

标记现在看起来像这样：

<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%;
}

【讨论】：

看一下pinkgothic image into my question cmets，看起来行为正常（只是不直观理解）
哦 - 我注意到他们在 bugmozilla 上也给出了相同的答案；）
是的，想想它是有道理的，基于这个答案我想出了这个解决方案：jsfiddle.net/8FkE3。我将在上面编辑我的回复。
Argh，我看到这个解决方案已经给出并被驳回，因为链接变得不可点击。对不起。
对，我知道一定有一个解决方案：将 css 属性指针事件设置为“无”。这是thirtydot's solution forked to make use of this feature

【解决方案5】：

只需确保使用rgba、like in this fiddle 指定子背景属性即可。

给父母一个background-color 以防止下面的任何东西显示出来。

ul {
    box-shadow : inset 0 0 10px 10px gray;
    background-color: white;
}

li:nth-child(even) {
    background : rgba(255,0,0,0.2);
}

【讨论】：

【解决方案6】：

这对我来说非常有用，无需任何额外的 DOM 元素（如“包装器”等）：

div.img {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 280px;
  background-image: url(/images/anyimage.png);
}

div.img:after {
  display: inline-block;
  width: 100%;
  height: 300px; //parent height +20px
  position: absolute;
  top: -10px;
  left: 0;
  box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
  content: ' ';
  pointer-events: none;

}

【讨论】：