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

Question

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

有人对此有解释吗？

Answer 1

如果您分别绕每个角，您会发现有所不同。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%;
}

<div class="half"></div><code>border-top-right-radius: 50%;</code><br/>
<div class="full"></div><code>border-top-right-radius: 100%;</code><br/>
<div class="weird"></div><code>border-top-left-radius: 50%;<br/>border-top-right-radius: 100%;</code>

Answer 2

任何大于半径的东西都默认为实际半径。根据定义，半径在所有方向上都相同，定义了一个圆。换句话说，直径的一半。50%。

这意味着半径以上的任何东西（半径是一半，所以 50%）默认为半径。因此，浏览器会将 50% 以上的任何内容视为简单的 50%，并且会产生相同的效果。

我在这里找到了这个。