为什么当我使用径向渐变(圆在)时，具有不透明度的边框会在圆内形成正方形?

Question

当我在css中有一个带有背景的圆圈时：径向渐变(圆圈为75px 50px，#5cabff，#003)并添加一个具有不透明度的边框，它使圆看起来内部有一个正方形。为什么会发生这种情况，是否有解决方案不发生这种情况？

.style {
width: 200px;
height: 200px;
border-radius: 50%;
border: 27px solid #00000030;
background: radial-gradient(circle at 75px 50px, #5cabff, #003);
}

<div class="style"></div>

我希望在添加不透明度的边框时，圆中没有方形，而是带有边框的 3d 球体。

Answer 1

您需要调整background-origin以使其border-box，以便渐变也将边框视为其区域。默认情况下，background-origin设置为padding-box而background-clip设置为border-box使背景在边框上重复，从而产生奇怪的效果：

我还在圆心添加了边框的27px，因为现在在计算中考虑了边界。

.style {
width: 200px;
height: 200px;
border-radius: 50%;
border: 27px solid #00000030;
background: radial-gradient(circle at 102px 77px, #5cabff, #003) border-box;
}

<div class="style"></div>

与获取有关背景原点问题的更多详细信息相关：为什么此径向梯度不能完成圆？