本文主要讲css里面的boder-radius本质逻辑。
我们新手使用boder-radius，一般都是这样的：
// 表示4个角圆角半径为40rpx；
border-radius: 40rpx;
// 分别给top-left, top-right, bottom-right, bottom-left圆角半径赋值。
border-radius: 40rpx 40rpx 0 0;
，‘border-radius：’的完整赋值就应该是4个值，这4个值分别表示矩形4个角圆弧半径。如下：
图1-1
上图中圆角的‘半径’为40rpx，与绿色小圆内切的正方形边长为80rpx。红色矩形宽高分别为400rpx,200rpx。
咋一看，没毛病。但你看下面的例子
图2-1
我们知道，圆的半径是一个唯一确定的值，那上图的50%的结果是多少呢？是宽度的50%，还是高度的50%？
针对上面的问题，我问了一个前端老司机，他说50%是一个组合值，但无法解释‘组合值’怎么对应到半径这个单一值上来。
接着我又查了一些资料，再看看一些教程，忽然注意到，我之前以为是完整的写法，如
border-radius: 40rpx 40rpx 0 0;
根本不完整！这仍然是一种省略写法！省略写法导致了我们对这个值的错误理解。我们甚至不应该叫这个值radius，而应该是椭圆的长、短轴顶点距离。
图1-1左上角的圆角，看似是一个圆的1/4，其实这只是一个巧合，恰巧椭圆焦距为0，变成了圆，圆是椭圆的特殊情况。为什么这么巧呢?答案是省略写法造成的。因为border-radius的完整语法如下：
border-radius: 1-4 length|% / 1-4 length|%;
仔细看你会发现，这里面包含2组值，中间用斜杠“/”分隔。示例：
图2-2
如图2-2所示，图中两个式子是等效的。
你写的
border-radius: 30% 30% 0 0;
最终会被系统自动扩展成完整的形式：（红色矩形400rpx * 200 rpx）
border-radius: 120rpx 120rpx 0 0 / 60rpx 60rpx 0 0;
扩展关系图
斜杠'/'之前的一组值，表示的是宽度相关的值，width * 30% = 120rpx，
斜杠'/'之后的一组值，表示的是高度相关的值，height * 30% = 60rpx。
这2个值分别做椭圆长轴、短轴的顶点距离。
椭圆知识复习：
设P(x,y)为椭圆上任意一点，根据椭圆定义知
|PF1|+|PF2|=2a，（a>0）
图2-3
上面例子中的120rpx对应的是a的值，60rpx对应的是b的值。
所以boder-radius的斜杠'/'前面的4个值，分别对应4个角关联的椭圆的a值；斜杠'/'后面的4个值，分别对应4个角关联的椭圆的b值。
图3-1，效果示例（仅展示4个角关联椭圆中的1个）
如图3-1所示，当你（为每个角‘半径’）输入一个值30%时，系统自动解析成2个值
a = width * 30% = 120rpx
b = height * 30% = 60rpx
总结：
border-radius的值最终都会扩展成如下格式：
border-radius: a1 a2 a3 a4 / b1 b2 b3 b4;
[a1, b1], [a2, b2], [a3, b3], [a4, b4]
分别对应
[top-left], [top-right], [bottom-right], [bottom-left]
四个角的椭圆。
理解了这一点，当遇到UI有弧度的纯色背景时，就可以通过控制border-radius绘制出背景图，节省空间。
THE END
扩展知识：
如果使用百分比来做radius的值，则最多为50%，超过这个值，系统自动计算成50%；所以，50%，100%，666%的静态展示效果是一样的。如果是动画效果，则过程有所区别。
这样做的目的是
使每一个角的弧线切点不超过其所在的矩形边的一半，
这样就不会和相邻的角的弧线有交集，防止打架，保证了2个相邻弧线一定能平滑过渡（都会和矩形边内切）
虽然border-radius这个名称是‘半径’，一般我们绘制一个圆角弧度时也完全没问题，但是你心里应该清楚，这个所谓‘半径’，是椭圆长、短轴顶点距离相等时，合二为一的结果。如果你写的是诸如20rpx, 20px, 33pt等具体值（前提是不超过所在边长的50%），那么结果必然是得到一个正圆的圆弧；如果你写的是20%, 15%, 50%等百分比值，则不一定是得到一个正圆（除非矩形的宽 = 高）。
网友评论