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%，则如下所示。

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

参考：MDNborder-radius1. 用途：为边框设置圆角，若无边框，则会作用到背景上。2. 设置原则：若为一个值，则用其为半径构建圆形，这个圆与边框的交集形成圆角效果。 若为两个值，则用两个值分别为半长轴、半短轴构建椭圆，这个圆与边框的交集形成圆角效果。3. radius的值是百分比，就相当于盒子的宽度和高度的百分比。例1 盒子宽高都为100px。border-top-left-radius：50% 就相当于用50px作为半径构建圆形，此圆形与上左边框的交集，形成圆.. <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .yuanxing 一般情况下，只要你几个圆点用的同一个css，那就肯定不是你代码问。而且你查看ios中居然很完美，当然挺贵的安卓手机中基本上也没问题。造成这种原因的情况好几种： 使用了px转rem或者px转vw之类的插件，造成了计算过程中产生误差。 使用了rem或者vw之类像素单位，造成了计算过程中产生误差。 这个情况最操蛋，画圆宽高是奇数，而且圆点比较小，画出的圆就不 规则 了。 当然可能还有其他情况，毕竟安卓手机版