我正在使用影子盒,但它使所有的容器都被阴影包裹起来,我怎样才能在中间制作一个阴影,如上图所示？
解决方法
从
CSS drop-shadows without images by Nicolas Gallagher
@H_301_8@<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-Box-shadow: 0 1px 4px rgba(0,0.3),0 0 40px rgba(0,0.1) inset;
-moz-Box-shadow: 0 1px 4px rgba(0,0.1) inset;
Box-shadow: 0 1px 4px rgba(0,0.1) inset;
}
.drop-shadow:before,.drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.curved-hz-2:before {
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.curved:before {
top: 10px;
bottom: 10px;
left: 0;
right: 50%;
-webkit-Box-shadow: 0 0 15px rgba(0,0.6);
-moz-Box-shadow: 0 0 15px rgba(0,0.6);
Box-shadow: 0 0 15px rgba(0,0.6);
-moz-border-radius: 10px / 100px;
border-radius: 10px / 100px;
}
