径向渐变不会创建完美的圆圈

Question

示例代码：

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, blue 50%, pink 50%);
}

<div></div>

圆的边缘是锯齿状的。我怎样才能完全圆它？

Answer 1

对此有一些解决方案，在 this Medium article 中讨论过曼迪迈克尔.

一个优雅的方法是使用 calc 添加第二种颜色的单个像素，如下所示，它渲染足够的模糊以抵消锯齿。

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, blue 50%, pink calc(50% + 1px));
}

<div></div>

Answer 2

我在粉红色上添加了 0.5%，它有点平滑了边缘。希望这就是您要找的。

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 50%, blue 50%, pink 50.5%);
}

<div></div>

Radial-gradient doesn’t create perfect circles