border-radius 50% 和 100% 有什么区别？

Question

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

有人对此有解释吗？

Answer 1

Anything more than the radius defaults to the actual radius. By definition a radius is the same in all directions, defining a circle. In other words, half of the diameter. 50%.

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

我找到了这个 here。

Answer 2

如果您分别绕过每个角，您会发现不同之处。 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>

border-radius 50% 和 100% 有什么区别？

What is the difference between border-radius 50% and 100%?

html

css

border