html - 如何仅在盒子的腹部部分制作div阴影 - css

Question

我正在努力实现这一目标：

这在css中怎么可能？我看到了一些 jsfiddle 代码，但它们似乎很复杂。

有人可以帮我吗？

Answer 1

尝试：

HTML 代码：

<div class="box effect">
    <h3>Effect</h3>
</div>

代码：

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
.effect
{
    position:relative;       
    -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;
}
.effect:before, .effect:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect:after
{
    right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

演示小提琴

Answer 2

看看这个页面，没有图像的 CSS 阴影 创建不同的 CSS3 盒子阴影效果

这可能会有所帮助。