我可以在宽度和高度为0的div上放置圆盒阴影吗

Question

我正在尝试创建边缘模糊的圆形。 通过创建具有50％边界半径的div，然后应用框阴影，我获得了成功。 但是，我正在使用各种框阴影设置随机创建这些形状，并且当框阴影模糊非常分散时，中间的颜色与div不同，并且出现了硬边框。 我尝试将div的宽度和高度设置为0px，但是框阴影的圆形消失了，它看起来是方形的。

有没有办法使div的宽度和高度的div保持阴影？还是我应该用来实现我想要的其他方法？

Answer 1

您可以考虑radial-gradient具有类似的效果：

.box {
 width:100px;
 height:100px;
 border-radius:50%;
 background:radial-gradient(farthest-side,red ,transparent );
}

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

您可以将其与模糊滤镜结合使用以增强阴影效果：

.box {
 width:100px;
 height:100px;
 border-radius:50%;
 background:radial-gradient(farthest-side,red ,transparent );
 filter:blur(10px);
}

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