当CSS框改变大小[重复]时，为什么边界半径率会改变

Question

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

Answer 1

高度为5rem，3rem每个角的半径为6rem，这使得顶部的半径为6rem，因为6rem没有空间，所以显示半径为2.5rem。如果你想保持3rem，你必须确保最小的宽度和高度。

* {
  margin: 1rem;
  min-width: 6rem;
  min-height: 6rem;
  border-radius: 3rem;

 }

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

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

html lang-html prettyprint-override"><div class="box"></div>
<div class="box2"></div>

Answer 2

您可以在%中定义与世隔绝。

* {
  margin: 1rem;
 }

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

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

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