本文介绍了弯曲的阴影消失与背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个曲线水平阴影,它的工作原理,但背景颜色影响阴影
I want a curve horizontal shadow, it works, but the background-color affects to shadow
我有这个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消失,会发生什么? ??
我不明白...
if I uncomment background-color the shadow "curva" disappears, what happen???I don't understand...
推荐答案
您必须调整 index
,使其低于阴影 -
You have to adjust the z-index
of your container to make it lower than the shadow - DEMO
.dcontainer {
background-color: #f6f6f6;
height: 140px;
position: relative;
z-index: -5;
}
这篇关于弯曲的阴影消失与背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!