盒子阴影和浮动框的CSS问题答案

【问题标题】：CSS problem with box shadow and floating box盒子阴影和浮动框的CSS问题
【发布时间】：2010-09-01 15:23:28
【问题描述】：

我有两个相邻的 div，类名为 div1 和 div2。我使用 box-shadow 在两个 div 上获得漂亮的阴影。问题是我希望 div1 的阴影覆盖 div2，以获得 div2 从 div1 后面伸出的感觉。现在我让 div2 的阴影超过了 div1 。希望你能理解我的问题。有可能解决这个问题吗？

<div class="div1"></div>
<div class="div2"></div>

这是css：

.div1 {
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

.div2 {
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

【问题讨论】：

不要使用 CSS 来做到这一点。请改用图像和嵌套 div。

标签： html css shadow

【解决方案1】：

你需要给这两种背景颜色 - 默认情况下元素是透明的，从而导致它们的阴影相互“突出”。要将它们放在一起，只需使用z-index CSS 属性。

.div1 {
    z-index: 99;
}

.div2 {
    z-index: 100;
}

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    background-color: white;
    margin-right: 5px;

    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
    box-shadow: 0px 0px 80px #A0A0A0;
}

见：http://www.jsfiddle.net/wspDP/4/

【讨论】：

这不能回答问题。我们希望 div1 出现在前面，而 z-index 不适用于阴影。
@Steve 打扰一下？该解决方案显然适用于 OP，否则他不会将其标记为已接受。如果它对你不起作用，那么显然你在这里有一个不同的问题。
那么有人应该解决这个问题，因为这对我来说很清楚“问题是我希望 div1 的阴影覆盖 div2，以获得 div2 从 div1 后面伸出的感觉。”我已经在 FF 和 Chrome 中尝试了您的解决方案，但没有成功。
@Steve 我从这个问题中了解到的是，他希望一个阴影出现在另一个元素之上。这就是我的解决方案所做的，这就是他接受的。如果它没有回答您的问题，那么很抱歉，您找到了错误的问题。但是你无权代表 OP 决定他想要什么。
他明确说问题是div2显示在div1上方，并询问如何让div1在div2上方。您的解决方案完全符合他的做法。这与我的问题无关，只是这个 StackOverflow 问题和答案误导了以后发现它的任何人。

【解决方案2】：

<style>
.container{
  position:relative;
}
.div1 {
    z-index:80;
    width:500px;
    height:500px;
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #aaa;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

.div2 {
    z-index:-10;
    position:absolute;
    width:500px;
    height:500px;
    float: left;
    left:560px;
    top:30px;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #333;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}
</style>
<div class="container">
  <div class="div1">asdf </div>
  <div class="div2">asd asdf</div> 
</div>

z-index 高意味着 div 会在最上面，所以你可以根据需要进行调整，但要给出准确的感觉，你可能需要玩颜色，暗影 vs 亮影。

【讨论】：