未知元素大小的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;
}