css - 为什么当我使用径向渐变(circle at)时，不透明的边框会在圆圈内形成一个正方形？

Question

当我在 css 中有一个带有背景的圆:radial-gradient(circle at 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>

相关以获取有关背景来源问题的更多详细信息:Why doesn't this radial-gradient complete the circle?