border

border,第1张

border

这个实际上可以仔细区分一下,楼上的两个图具体来说应该是 border-top-left-radius 的50%和100%的区别,


假如我们直接设置border-radius: 100%; 或者为50%


我们会发现这两个图实际上没有区别(长方形也一样),所以我们需要了解一下border-radius值真正的含义,
它的值如果是百分比的话,就相当于盒子的宽度和高度的百分比,所以border-radius为50%时,对应的是边长的一半,所以正方形会显示圆形,当我们再增加至100%这个过程中他的显示结果都不会改变,这是因为W3c有对于’曲线重合‘这样的规范,当两个邻角的 半径和超出了总边长,浏览器会重新计算保证不会重合,所以建议使用border-radius:50%来避免浏览器进行不必要的计算

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/4907271.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-12
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存