未知元素大小的css边界半径

Question

如果我在元素上设置border-radius: 100000px，它将是一个完美的半径。如果我设置border-radius: 100%，我会得到完全不同的结果。

.test {
  background: red;
  width: 150px;
  height: 50px;
}

.border1 {
  border-radius: 10000px;
}

.border2 {
  border-radius: 100%;
}

Correct
<div class="test border1"></div><br>
Weird
<div class="test border2"></div>

有没有办法使用其他单位获得与10000px相同的结果？我的元素大小可能是未知的。

Answer 1

您可以使用vh长度单位获得相同的结果

.border2 {
  border-radius: 100vh;
}

Answer 2

正确地说Cenk YAGMUR但超过50％的高度不接受边界拉伸。 border-radius超过最小值（宽度，高度）的50％毫无意义。

.border2 {
  border-radius: 50vh;
}

Answer 3

完美的半径对你来说是一个圆圈？

border-radius: 50% 50% 50% 50%;

如果你的元素是偶数，或者一个正方形开头，这会给你一个圆圈。

这是一个有趣的工具，说明了它的工作方式 Moz Border-radius generator