不对称的CSS阴影

Question

有没有办法像这样创建阴影：

我想要的是底部中心比左下/右边更大的阴影。

Answer 1

http://jsfiddle.net/PtbNb/1/

<div class="box"></div>

.box {
    -webkit-box-shadow: -10px 32px 24px -28px rgba(0, 0, 0, 1);
    -moz-box-shadow: -10px 32px 24px -28px rgba(0, 0, 0, 1);
    box-shadow: -10px 32px 24px -28px rgba(0, 0, 0, 1);
    height:250px;
    width:250px;
    background:grey;
}

生成器：http://www.cssmatic.com/box-shadow

Answer 2

你绝对可以使用伪元素:before和:after来实现它：（working jsFiddle）

.effect{
    position:relative;
}

.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:50%;
    bottom:0;
    left:10px; /* distance from left inwards */
    right:10px; /* distance from right inwards */
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}