径向渐变不会创建完美的圆[重复]

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%，它使边缘变得平滑。希望这就是您正在寻找的。​​p>

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

<div></div>