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％，并且会产生相同的效果。

我找到了这个here。

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

2 个答案: