是否可以使用css创建此椭圆阴影？

Question

我想知道是否可以在使用CSS时创建以下阴影。我尝试添加框阴影但是它会在框中添加阴影，而不是像下图中那样。我也尝试使用伪元素，但没有找到任何方法使其成为椭圆形。我想知道这是否可以使用CSS，或者我只需要使用透明图像进行阴影。

Answer 1

这是我刚刚制作的类似阴影部分的东西。如果要使其适用于非webkit，则需要为其他浏览器添加规则。基本思想是使用border-radius创建一个圆，然后使用scale在y方向上缩小它，最后将其模糊。

http://jsfiddle.net/L4QDs/1/

#shadow {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.5;
    -webkit-filter: blur(10px);
    -webkit-transform: scale(1, 0.2);
}

Answer 2

您可以使用伪元素

创建它

CSS

#base {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: blue;
    position: relative;
}

#base:after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 5%;
    width: 90%;
    height: 8%;
    border-radius: 50%;
    box-shadow: 0px 10px 5px black;
}

fiddle