border-radius 构建规则讲解 及 50% 和 100% 的异同

 参考：MDN 

border-radius

1. 用途：为边框设置圆角，若无边框，则会作用到背景上。

2. 设置原则：

• 若为一个值，则用其为半径构建圆形，这个圆与边框的交集形成圆角效果。
• 若为两个值，则用两个值分别为半长轴、半短轴构建椭圆，这个圆与边框的交集形成圆角效果。

3. radius的值是百分比，就相当于盒子的宽度和高度的百分比。

• 例1 盒子宽高都为100px。border-top-left-radius：50% 就相当于用50px作为半径构建圆形，此圆形与上左边框的交集，形成圆角。（单值规则）

例1

• 例2 盒子宽为200px，高为100px。border-top-left-radius：50% 就相当于用100px作为半长轴，50px作为半短轴构建椭圆，此椭圆与上左边框的交集，形成圆角。（单值规则）

例2

• 例3 盒子宽高都为100px。border-top-left-radius：10% 50% 就相当于用10px作为半短轴，50px作为半长轴构建椭圆，此椭圆与上左边框的交集，形成圆角。（双值规则）

例3

• 例4 盒子宽为200px，高为100px。border-top-left-radius：10% 50% 就相当于用20px作为半短轴，50px作为半长轴构建椭圆，此椭圆与上左边框的交集，形成圆角。（双值规则）

例4

 4. border-radius是简写属性：把 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 四个合并简写。

了解了设置规则，下面我们来看 50% 和 100% 的故事。

场景：先有边长为100px的正方形。

逐步设置各个边圆角为50%，则如下所示。

分析：每一步都正好用边长的一半为半径构建圆形，圆形于边框的交集，形成圆角。

逐步设置各个边圆角为100%，则如下所示。

分析：

1. 设置 border-top-left-radius: 100% 后，可见用边长为半径构建圆形，圆形于边框的交集，形成圆角。
2. 接着添加设置 border-top-right-radius: 100%后，可见其效果为：用边长的一半为半径构建圆形。其实这是W3C对于重合曲线的规范：如果两个相邻角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。
3. 建议使用border-radius: 50% 来避免浏览器不必要的计算。