前言

本篇文章主要解释为什么在CSS设置样式 border-radius 属性值为50%和100% 时效果一样的疑惑，仅供学习参考，看完此篇希望解答了你心中的疑惑，很开心可以帮助到你。

一、画一个正常圆形

首先要先画一个正方形，然后设置 border-radius属性设置圆角。

• 代码示例

  • html

    <div class="box"></div>
    

  • css

    .box {
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background-color: green;
    }
    

  • 效果如下

    

思考：为什么设置为50%就成为圆形了呢？

答：属性值是百分比的话，就是相对于元素的宽度和高度的百分比，将元素的四个角的半径都设置为50%，比如我们的元素宽高都是 500px，值设置为 50%，每个角对应的半径就是 250px。

• 看下图比较好理解

  

二、进一步理解

有一次，老师上课写的案例，设置的 border-radius属性的值为 100%，展示的效果竟然也是圆形，非常的不理解。

重点

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

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

述说

如果左上角的圆角半径被设置成了 100%，那么圆角就会从这个方形左下角跨到右上角。

口说无凭，实践一下

• 代码示例

  • html

    <div class="box"></div>
    

  • css

    .box {
        width: 500px;
        height: 500px;
        border-top-left-radius: 500px;
        background-color: green;
    }
    

  • 效果如下

    

如上图所示，可见和我们说的是成立的

如果同时把右上角的圆角半径也设置成为 100%，会发生什么呢？

• 代码示例

  • html

    <div class="box"></div>
    

  • css

    .box {
        width: 500px;
        height: 500px;
        border-top-left-radius: 500px;
        border-top-right-radius: 500px;
        background-color: green;
    }
    

  • 效果如下

    

嗯？我们发现左下角并没有变圆角，反而变成如上图样子，这是为什么？

答：这是因为左上角的圆角半径设置为 100%，右上角的圆角半径也设置为 100%，合起来就有 200%，浏览器是不会允许这种情况出现的，它会重新计算，匀出空间给右边的圆角，同时缩放两个圆角的半径直到它们可以刚好符合这个方形，所以半径就变成了 50%。

补充说明

同样的，浏览器也会对其他的圆角进行相同的计算，左下角和右下角，计算的结果也是圆角的半径变为 50%，所以，我们看到展示的效果是一个圆形。

三、 总结

如果所有圆角的半径都被设置为了 100%，或者相邻的角长度合起来超过了原形状的半径，浏览器会重新计算，保证圆角能够刚好适应原图形。

建议

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

四、参考文献

知乎 zhuanlan.zhihu.com/p/20128284

感谢👍