概述看了一篇用CSS画粉红猪小妹的文章。我抱着锻炼自己的心态造了个轮子，画了佩奇的弟弟乔治。效果不错。看这里，源码在这里。开发过程也让我对border-radius属性有了更深的理解。border-radius之前用这个属性的时候，只知道是圆角的意思。我经常使用border-radius:5px来实现圆角矩形或border-radius:50%来画圆。在小猪的发育过程中，会用到很多不规则的形状，所以需要了解这个属性更深层次的原理，才能满足我的发育需求。完整体该属性的完整体如下：border-radius:x1x2x3x4/y1y2y3y4;也就是说，任何值都可以转换为这种形式。例如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如果对应的x和y值相等，可以省略成border-radius的形式：x1x2x3x4；如果这些x也相等，可以省略成border-radius:x1的形式。当该值使用百分比时，x值为参考矩形的宽度，y为参考矩形的高度。比如宽200px，高100px的矩形，如果设置border-radius:10%10%10%10%/10%10%10%10%，转换成像素相当于border-半径：20px20px20px20px/10px10px10px10px。当设置border-radius:100%时，发现其行为与border-radius:50%相同。这是因为如果水平方向的两个半径之和（x1+x2或x3+x4）大于宽度，或者垂直方向的两个半径之和（y1+y3或y2+y4）为大于高度，浏览器会处理它们Scaledown，直到不再超过。开始画图了解了border-radius的原理之后，就可以开始画图了。主要有以下几个步骤：找一张小猪乔治的图片作为参考，分解图片中的各个部分，一一实现（废话）。其实掌握了border-radius之后，这几步都不难，只要仔细画拉就可以完成。我画的小猪乔治在参考资料中有展示。使用CSS绘制小猪佩奇。你就是下一个社会人！
