border-radius
1. 用途:为边框设置圆角,若无边框,则会作用到背景上。
2. 设置原则:
- 若为一个值,则用其为半径构建圆形,这个圆与边框的交集形成圆角效果。
- 若为两个值,则用两个值分别为半长轴、半短轴构建椭圆,这个圆与边框的交集形成圆角效果。
3. radius的值是百分比,就相当于盒子的宽度和高度的百分比。
- 例1 盒子宽高都为100px。border-top-left-radius:50% 就相当于用50px作为半径构建圆形,此圆形与上左边框的交集,形成圆角。(单值规则)
- 例2 盒子宽为200px,高为100px。border-top-left-radius:50% 就相当于用100px作为半长轴,50px作为半短轴构建椭圆,此椭圆与上左边框的交集,形成圆角。(单值规则)
- 例3 盒子宽高都为100px。border-top-left-radius:10% 50% 就相当于用10px作为半短轴,50px作为半长轴构建椭圆,此椭圆与上左边框的交集,形成圆角。(双值规则)
- 例4 盒子宽为200px,高为100px。border-top-left-radius:10% 50% 就相当于用20px作为半短轴,50px作为半长轴构建椭圆,此椭圆与上左边框的交集,形成圆角。(双值规则)
4. border-radius是简写属性:把 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 四个合并简写。
了解了设置规则,下面我们来看 50% 和 100% 的故事。
场景:先有边长为100px的正方形。
逐步设置各个边圆角为50%,则如下所示。
分析:每一步都正好用边长的一半为半径构建圆形,圆形于边框的交集,形成圆角。
逐步设置各个边圆角为100%,则如下所示。
分析:
- 设置 border-top-left-radius: 100% 后,可见用边长为半径构建圆形,圆形于边框的交集,形成圆角。
- 接着添加设置 border-top-right-radius: 100%后,可见其效果为:用边长的一半为半径构建圆形。其实这是W3C对于重合曲线的规范:如果两个相邻角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合。
- 建议使用border-radius: 50% 来避免浏览器不必要的计算。