likes
comments
collection

CSS border-radius 50% vs 100%

作者站长头像
站长
· 阅读数 11

CSS border-radius 50% vs 100%

前言

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

一、画一个正常圆形

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

  • 代码示例

    • html

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

      .box {
          width: 500px;
          height: 500px;
          border-radius: 50%;
          background-color: green;
      }
      
    • 效果如下

      CSS border-radius 50% vs 100%

思考:为什么设置为50%就成为圆形了呢?

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

  • 看下图比较好理解

    CSS border-radius 50% vs 100%

二、进一步理解

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

重点

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

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

述说

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

口说无凭,实践一下

  • 代码示例

    • html

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

      .box {
          width: 500px;
          height: 500px;
          border-top-left-radius: 500px;
          background-color: green;
      }
      
    • 效果如下

      CSS border-radius 50% vs 100%

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

如果同时把右上角的圆角半径也设置成为 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;
      }
      
    • 效果如下

      CSS border-radius 50% vs 100%

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

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

补充说明

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

三、 总结

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

建议

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

四、参考文献

知乎 zhuanlan.zhihu.com/p/20128284

感谢👍