Question

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

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

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

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

有什么想法吗？

更新

框内的内容是某种幻灯片here an example (original problem)。 thirtydot的答案可以解决这个问题，但它迫使我做一点点破解，根据内容更改包装器背景：example here (thirtydot trick)。

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

更新2

在另一个论坛上讨论这个问题，我found another way：基本上，我将使用box-shadow和{{1直接在内容（box-shadow元素）上然而，'掩码'效果正是我想要完成的，所以这不是解决方案。

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

UPDATE3

有人开了一个bug on mozilla，得到了这个澄清“问题”的答案：

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


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


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

因此渲染正是规范所要求的。

UPDATE4

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

Answer 1

由于我也遇到了这个问题而且我也没有看到这种行为正常，我提交了一份错误报告over at mozilla

我也可以在谷歌浏览器中重现这个问题，所以我想知道这是不是真的是一个错误。但它可能是。

修改

确实，这不是一个错误，而是它的工作方式。因此，根据这些信息，我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%; }

Answer 2

我有点困惑你实际上在追求什么。如果不太正确，请告诉我:)。

这是我最好的猜测。

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>

Answer 3

问题是分层重叠，你可以使用边距或填充来避免它。尝试 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;
}

Answer 4

检查这个小提琴：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;
}

Answer 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);
}

Answer 6

这对我来说非常有用，没有任何额外的DOM元素（比如'wrapper'等）：

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;

}

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

6 个答案: