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

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>

获取有关 background-origin 问题的更多详细信息：

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

Why does a border that has opacity make a square inside a circle when I use radial-gradient(circle at)?

css

radial-gradients