边界半径百分比

Question

在 CSS 中，允许写这样的东西。

#div-with-border {
  width: 100%;   // scales with parent wrapper
  height: 30%;   // scales with parent wrapper

  border: 1px solid black;
  border-radius: 10%;
}

如果#div-width-border不是完美的正方形，则边框不会是圆形，因为这意味着 10% 的宽度和 10% 的高度用于边框半径（不同）。我想得到完美的圆圈......我不能使用px，因为边界半径取决于高度/宽度。

我确信#div-width-border元素的宽度总是大于高度。我需要一个大小的边界半径100% of element height来获得一个完美的圆，但100%不会这样做，因为它将使用元素宽度作为半径计算的一部分。

Answer 1

如果您知道宽度和高度之间的比率，您可以使用斜线注释为水平和垂直边界半径指定不同的百分比值。一个例子如下：

.wrapper {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.div-with-border {
  width: 100%;
  height: 25%;
  background-color: blue;
  border: 1px solid black;
  border-radius: 10% / 40%;
}

<div class="wrapper">
  <div class="div-with-border"></div>
</div>