我可以在宽度和高度为 0 的 div 上有一个圆框阴影吗

Question

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

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

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>