Html 可以使用css创建这个椭圆阴影吗?

Html 可以使用css创建这个椭圆阴影吗?,html,css,Html,Css,我想知道是否可以使用CSS创建下面的阴影。我尝试添加框阴影,但它会向框添加阴影,而不像下图中那样。我也尝试过使用伪元素,但没有找到任何方法使它变成椭圆形。我想知道这是否可以使用CSS,或者我只需要对阴影使用透明图像 这是我刚刚制作的类似阴影部分的东西。如果要使其在非webkit上工作,则需要为其他浏览器添加规则。其基本思想是使用“边界半径”创建一个圆,然后使用“缩放”在y方向缩小它,最后模糊它 您可以使用伪元素创建它 CSS ^@dfsq的小提琴准确地再现了op的图像 #shadow {

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


这是我刚刚制作的类似阴影部分的东西。如果要使其在非webkit上工作,则需要为其他浏览器添加规则。其基本思想是使用“边界半径”创建一个圆,然后使用“缩放”在y方向缩小它,最后模糊它


您可以使用伪元素创建它

CSS


^@dfsq的小提琴准确地再现了op的图像
#shadow {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.5;
    -webkit-filter: blur(10px);
    -webkit-transform: scale(1, 0.2);
}
#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;
}