虽然以下两个框的边界半径量相同，但显示的结果不同。这是什么原因？我们怎样才能使它在每个盒子里看起来都一样呢。我们必须根据盒子的大小做数学运算吗？（我说的是为什么方框2不那么圆。）

我知道这是一种视错觉，但考虑到盒子的大小，我希望它看起来是一样的。

* {
  margin: 1rem;
 }

.box {
  width: 10rem;
  height: 5rem;
  background-color: black;
  border-radius: 3rem;
}

.box2 {
  width: 20rem;
  height: 10rem;
  background-color: black;
  border-radius: 3rem;
}

<div class="box"></div>
<div class="box2"></div>

当我用百分比做的时候，边界半径会参差不齐。

    * {
  margin: 1rem;
 }

    .box {
      width: 10rem;
      height: 5rem;
      background-color: black;
      border-radius: 20%;
    }

    .box2 {
      width: 20rem;
      height: 10rem;
      background-color: black;
      border-radius: 20%;
    }

<div class="box"></div>
<div class="box2"></div>