当CSS框改变大小时，为什么Border-Radius比率会改变[重复]答案

【问题标题】：Why is the Border-Radius rates changes when the CSS box changes the size [duplicate]当CSS框改变大小时，为什么Border-Radius比率会改变[重复]
【发布时间】：2021-09-07 21:04:03
【问题描述】：

虽然以下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>

【问题讨论】：

在 box1 中，您已达到边界半径限制，当正方形变为圆形时，您无法使其更圆。
@AntonioTorres 我不是在谈论这个。我在问为什么第二个盒子看起来不那么圆润。结果，我输入了相同数量的“边界半径”。如何在不进行数学运算的情况下让每个盒子看起来都一样？
您希望这些框看起来像您的 sn-p 中的第一个还是第二个？如果您认为在一块橡胶上具有形状并均匀拉伸它，这并不是真正的视觉错觉，形状相同，只是比例不同。
这不是视错觉，在方框 1 中它显示了 2.5rem 的半径，因为它没有 3rem 的空间，我已经用解决方案回答了你我希望它值得.

标签： css

【解决方案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>

【讨论】：

【解决方案2】：

您的高度为 5rem，每个角的半径为 3rem，这使得顶部的半径为 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;
}

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

【讨论】：