首页 文章

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

提问于
浏览 次
21

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

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

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

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

任何的想法？

UPDATE

盒子里面的内容有点像幻灯片，here an example (original problem) . thirtydot的答案可以解决这个问题，但它迫使我做一点点破解，改变内容函数的包装器背景：example here (thirtydot trick) .

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

UPDATE 2

谈到另一个论坛上这个问题，我found another way：基本上，而不是在包装使用 box-shadow ，这将作为一个面具，我用 box-shadow 和 border-radius 直接对内容（ .step 元素）然而，'mask'效果正是我我试图完成，所以这不是解决方案 .

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

UPDATE3

有人打开了bug on mozilla，得到了这个清除'problem'的答案：

来自http://www.w3.org/TR/css3-background/#the-box-shadow：在堆叠上下文和绘制顺序方面，元素的外部阴影直接绘制在该元素的背景下方，元素的内部阴影直接绘制在该元素的背景上方（如果有的话，在边框和边框图像下方） . 特别是，元素的子元素的背景将绘制在嵌入阴影之上（实际上它们在元素本身的边框和背景之上绘制） . 因此渲染正是规范所要求的 .

UPDATE4

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

css background shadow css3

6 回答

  • 0

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

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

    edit:

    事实上，它意味着工作 . 所以，根据这些信息，我举例说明了这个解决方案：

    标记现在看起来像这样：

    <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%;
}
    回复于
  • 0

    我有点困惑你实际上是在追求什么 . 如果它不对，请告诉我:)

    这是我最好的猜测 .

    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>
    回复于
  • 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;
}
    回复于
  • 0

    检查这个小提琴：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;
}
    回复于
  • 15

    只需确保使用 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);
}
    回复于
  • 0

    这对我来说很有用，没有任何额外的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;

    }

    回复于

相关问题