3

クラス名がdiv1とdiv2の2つのdivが隣り合って浮かんでいます。ボックスシャドウを使用して、両方の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;
}
4

2 に答える 2

5

両方の背景色を指定する必要があります。要素はデフォルトで透明であるため、それらの影が互いに「突き出て」しまいます。それらを互いに重ねるには、単純にz-indexCSS プロパティを使用します。

.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/

于 2010-09-01T15:31:40.930 に答える
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 が上にあることを意味するため、必要に応じて調整できますが、正確な感覚を与えるには、色、暗い影と明るい影で遊ぶ必要がある場合があります。

于 2010-09-01T15:41:47.550 に答える