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

Question

我想知道是否可以使用 CSS 创建以下阴影。我尝试添加 box-shadow 但它会向框添加阴影，而不是下图中的阴影。我也尝试过使用伪元素但没有找到任何方法使它成为椭圆形。我想知道这是否可以使用 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);
}