CSS 中的径向渐变有奇怪的百分比？

Question

考虑 CSS 中的以下径向渐变。它从中间的红色开始，直到 50% 时切换为蓝色。但看起来根本不像50%。

div {
  width: 10rem;
  height: 10rem;
  background-image: radial-gradient(red 0%, red 50%,blue 50%, blue);
}

<div></div>

当我想画一个圆圈时，问题变得更加明显：

div {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-image: radial-gradient(red 0%, red 50%, blue 50%, blue);
}

<div></div>

大概50%是指正方形的直径吧？但这在大多数用例中并不实用，对吗？

无论如何，如何渲染一个具有径向渐变的圆，该渐变相对于半径精确地变化 50% ，或任何给定的百分比？对于 50% 的人来说，大约 40% 似乎有效。我认为一旦回答了第一个问题，就可以很容易地算出一个数学公式。但我也非常感谢其他解决方案。