小猪乔治和 border-radius

14 Jun 2018

之前看了一篇关于用CSS来画小猪佩奇的文章，抱着锻炼自己的心态造了个轮子，画了个佩奇的小弟乔治，效果可以看这里，源码在这里。

开发过程中也让我对border-radius这个属性有了更深刻的理解。

border-radius

以前我在使用这个属性时，只知道这个是表示圆角，常用border-radius: 5px实现圆角长方形或者border-radius: 50%来画圆形。在开发小猪的过程中，会需要使用许多不太规则的形状，因此需要了解该属性更深入的原理，才能满足我的开发需求。

完全体

该属性的完全体如下：

border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;

即任何值都可以转为该种形式。例如，border-radius: 50%等价于border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%。name这8个值分别代表什么含义呢？

矩形的四个圆角我们可以分别进行控制，例如矩形的左上圆角由x1和y1来控制，将一个水平半径为x1，垂直半径为y1的椭圆与矩形左上角相切，相切的两个点之间的圆弧就是最终的圆角曲线。如下图所示。

同理，x2和y2控制右上角，x3和y3控制右下角，x4和y4控制左上角。控制的方式与左上角的类似。

小Tips

1. 如果对应的x和y值相等，则可以省略成border-radius: x1 x2 x3 x4的形式；如果这些x也都相等，则可以省略成border-radius: x1的形式。
2. 当值使用百分比时，x取值是参照矩形的宽度，y是参照矩形的高度。比如宽200px，高100px的矩形，如果设置border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%，转换成像素等价于border-radius: 20px 20px 20px 20px / 10px 10px 10px 10px。
3. 当设置border-radius: 100%时，发现其表现与border-radius: 50%相同。这是因为如果水平方向的两个半径和（x1+x2或者x3+x4）大于宽度，或者垂直方向的两个半径和(y1+y3或y2+y4)大于高度时，浏览器会对它们进行等比例缩小，知道不再超出为止。

开始绘图

在了解了border-radius的原理后，就可以开始绘制了。

主要有以下几个步骤：

1. 找一张小猪乔治的图片参考
2. 对图片中的部分进行分解，并逐一实现（废话）

其实掌握了border-radius后，这些步骤都不难了，细心绘制就可以完成啦。

我绘制的小猪乔治如图

参考资料

• 用CSS画小猪佩奇，你就是下一个社会人！