Css 曲线阴影随背景色消失
我想要一个曲线水平阴影,它可以工作,但背景颜色会影响阴影 我有这个html:Css 曲线阴影随背景色消失,css,Css,我想要一个曲线水平阴影,它可以工作,但背景颜色会影响阴影 我有这个html: <div class="dcontainer"> <div class="dshadow curva curva-h"> myshadow </div> </div> 如果我取消注释背景色,阴影“curva”消失,会发生什么??? 我不明白…您必须调整容器的z-index,使其低于阴影- .dcontainer{ 背景色:#f6f6f6; 高度:140像
<div class="dcontainer">
<div class="dshadow curva curva-h">
myshadow
</div>
</div>
如果我取消注释背景色,阴影“curva”消失,会发生什么???
我不明白…您必须调整容器的
z-index
,使其低于阴影-
.dcontainer{
背景色:#f6f6f6;
高度:140像素;
位置:相对位置;
z指数:-5;
}
这怎么可能?带位置的z指数:相对??但它是有效的!
.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;
}