0

曲線の水平シャドウが必要ですが、機能しますが、背景色がシャドウに影響します

私はこのhtmlを持っています:

<div class="dcontainer">
  <div class="dshadow curva curva-h">
    myshadow
  </div>
</div>

そしてこのCSS：

.dcontainer {
    /*background-color: #f6f6f6;*/
    height: 140px;
}
.dshadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.dshadow:before,
.dshadow:after {
content:"";
position:absolute;
z-index:-2;
}

.curva:before {
top:21px;
bottom:10px;
left:0;
right:50%;
box-shadow:0 0 15px rgba(0,0,0,0.6);
border-radius:10px / 100px;
}

.curva-h:before {
top:50%;
bottom:0;
left:10px;
right:10px;
border-radius:100px / 10px;
}

背景色のコメントを外すと、影「curva」が消えます。どうなりますか??? 理解できない...

4

1 に答える 1

1

z-index影よりも低くなるようにコンテナを調整する必要があります -デモ

.dcontainer {
    background-color: #f6f6f6;
    height: 140px;
    position: relative;
    z-index: -5;
}
于 2013-03-11T21:30:32.943 に答える