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

点击上方卡片,支持~支持北忘山~

发现 border-radius:50%border-radius:100% 的效果是相同的,有点困惑,于是去上网查询了一下两者的差别。

border-radius 的值如果为百分比,则为盒子的宽度与高度的比值。所以当值为 50% 的时候正好是直径为盒子长度的圆。那当 border-radius100% 的时候,直径应该为两倍的边长,那为什么最终效果是和50%的时候的长度是一样的呢?

其实在 W3C 中,如果两个相邻角的半径之和超过了相应盒子边的长度,那么浏览器要重新计算,以保证两者不会重合。

假设有一个 100px 的盒子,若 border-top-left-radius:100%; 则盒子会变成一个半径为 100px 的 1/4圆。(如下图左)

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

这个时候,如果我们再给一个 border-top-right-radius:100%; 此时相邻的两个角的半径之和已经超过了盒子的长度,浏览器需要重新计算。计算的规则就是同时缩放两个圆角的半径,直至两个相邻角的半径和为盒子的长度。也就是说,当两个圆角的半径为 50% 的时候,圆角正好符合 W3C 标准。(图右)

版权声明:
作者:北忘山
文章:border-radius:50% 和 100% 的区别
链接:https://www.beiwangshan.com/archives/641.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>