HTML中border-radius: 50% 和 100%的区别

border-radius是指边框的圆角半径，影响的是边框四个角的样式。

圆形通常我们都是用 border-radius 属性来实现：先画一个方形，然后将它的 border-radius 设置成50%，但是有时候有的人会用 border-radius: 100%来实现。那么这两者的区别是什么呢？

下图为 border-radius: 50% 和 100% 的效果图，能比较直观的看到两者的区别：

• 将元素的四个角的半径都设置为50%，比如我们的元素宽高都是 200px，值设置为 50%，每个角  对应的半径就是 100px。

• 将元素的四个角的半径都设置为100%：

1. 从上图可以看到，如果左上角的圆角半径被设置成了 100%，那么圆角就会从这个方形左下角跨到右上角。
2. 另外，我们会发现第二个图形的上弧度和第一个图形的弧度不相同，是因为左上角的圆角半径设置为 100%，右下角的圆角半径也设置为 100%， 合起来就有 200%，浏览器是不会允许这种情况出现的，它会重新计算，匀出空间给右边的圆角，同时缩放两个圆角的半径直到它们可以刚好符合这个方形，所以半径就变成了 50%。
3. 同样的，浏览器也会对其他的圆角进行相同的计算，左下角和右上角，计算的结果也是圆角的半径变为 50%，所以，最终我们看到展示的效果是一个圆形。

W3C 对于重合曲线定义了规范：

如果两个相邻的角的半径之和超过了对应的盒子的边的长度，那么浏览器就要重新计算，保证它们不会重合。

总结：

在正方形上，如果设置border-radius为50%，则边框的四个角会变成半圆形，即变成一个圆形。如果设置border-radius为100%，则边框的四个角会变成完整的圆形，整个边框就变成一个圆形了。

因此，50%和100%的区别就是，50%边框四个角变成了半圆形，100%边框四个角变成了完整的圆形（圆角的半径都被设置为了 100%，或者相邻的角长度合起来超过了原形状的半径，浏览器会重新计算，保证圆角能够刚好适应原图形。）

建议：

当我们需要将形状设置为圆形时，建议使用 border-radius: 50%，为避免浏览器不必要的计算。