框阴影和浮动框的CSS问题

时间:2010-09-01 15:23:29

标签: html css shadow

我有两个相互浮动的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;
}

2 个答案:

答案 0 :(得分:5)

你需要同时给出两种背景颜色 - 默认情况下,元素是透明的,从而导致它们的阴影在彼此后面“伸出”。要将它们放在一起,只需使用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/

答案 1 :(得分:1)

<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将位于顶部,因此您可以根据需要进行调整,但要给出确切的感觉,您可能需要使用颜色,暗影和光影。