边界半径50％和100％有什么区别？

我刚刚发现，border-radius: 50%和border-radius: 100%看起来是一样的。

有人对此有解释吗？

如果您分别绕每个角，您会发现有所不同。100%将每条边的100％取整，50%仅将每条边的50％取整。如果拐角的半径对于任何给定的边缘都太大，则有效半径会更小。

考虑以下示例：

div{
  display: inline-block;
  vertical-align: middle;
  background: rebeccapurple;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
code{
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  padding: 3px;
  background: #eee;
}

.half{
  border-top-right-radius: 50%;
}
.full{
  border-top-right-radius: 100%;
}
.weird{
  border-top-left-radius: 50%;
  border-top-right-radius: 100%;
}

border-top-right-radius: 50%;

border-top-right-radius: 100%;

border-top-left-radius: 50%;
border-top-right-radius: 100%;