我正在使用 shadow-box
但它使所有容器都被阴影包裹。
我怎样才能像上图那样只在中间做阴影?
最佳答案
来自 CSS drop-shadows without images作者:尼古拉斯·加拉格尔
<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, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 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, 0, 0.6);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-border-radius: 10px / 100px;
border-radius: 10px / 100px;
}
关于html - 如何在中间的CSS中制作阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20772748/