css - 为什么CSS框改变大小时Border-Radius比率会改变

Question

下面2个框的border-radius量虽然相同，但显示的结果不同。这是什么原因？我们怎样才能让它在每个盒子里看起来都一样。我们是否必须根据盒子的大小进行数学运算？（我说的是为什么框 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>

标签： css

Answer 1

您可以定义border-radius百分比。

* {
  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>