年前也不知从具体什么时候开始我儿子迷上了小猪佩奇，再加上朋友圈疯狂传播的鼓风机版小猪佩奇宣传片，这两件事情促使我这个泥腿子前端产生了用代码绘制一副小猪佩奇图案的想法，作为一名“优秀的”开发来说，有想法就落实到行动中，这是必须的职业素养。代码是1月22号完成的，当时想发表出来的，由于年底工作比较繁忙，就拖到了现在。话不多说，先上效果图：
绘制这张图时，HTML主要就是div盒模型，css主要运用到了border-radius以及transform属性，例如绘制佩奇裙子的时候CSS和HTML代码如下：
/* 佩奇身体 泥腿子前端*/.pigBody {background-color: #de384e;border: 6px solid #BE002E;position: absolute;z-index: 16;bottom: 94px;left: 300px;width: 150px;height: 116px;box-sizing: border-box;border-radius: 110% 110% 0 0/260% 260% 0 0;}<!-- 佩奇身体 start 泥腿子前端--><div class="pigBody"></div><!-- 佩奇身体 end 泥腿子前端-->复制代码
裙子效果如图：
这个难点就是要弄懂border-radius 属性的具体定义和用法，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
border-radius: 1-4 length|% / 1-4 length|%;复制代码
按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
border-radius: 2px 1px 4px / 0.5px 3px;复制代码
等同于
border-top-left-radius: 2px 0.5px;border-top-right-radius: 1px 3px;border-bottom-right-radius: 4px 0.5px;border-bottom-left-radius: 1px 3px;复制代码
掌握了这点小猪佩绘制就简单多了，就是工作量的事情。
这张图中看似复杂的我个人觉得就是佩奇的尾巴了，我是用了几个图块拼接的，效果图如下：
CSS和HTML代码如下：
/* 佩奇尾巴 泥腿子前端*/.tail1{height: 20px;width: 18px;position: absolute;bottom: 114px;left: 279px;background-color: #4bdeff;border: 6px solid #ffd1e8;box-sizing: border-box;border-radius: 50% 50% 10% 50%;transform: rotate(35deg);}.tail2{height: 6px;width: 18px;position: absolute;bottom: 112px;left: 289px;background-color: #ffd1e8;border-radius: 0 0 150% 150% / 101% 0 150% 150%;transform: rotate(-15deg);}.tail3{height: 7px;width: 14px;position: absolute;bottom: 109px;left: 275px;background-color: #ffd1e8;border-bottom: 6px soild #ffd1e8;box-sizing: border-box;border-radius: 0 0 238% 211%;transform: rotate(-4deg);}.tail4{left: 266px;bottom: 112px;transform: rotate(47deg);}<!-- 佩奇尾巴 start 泥腿子前端--><div class="tail"><div class="tail1"></div><div class="tail2"></div><div class="tail3"></div><div class="tail3 tail4"></div></div><!-- 佩奇尾巴 end 泥腿子前端-->复制代码
不知道为什么每次贴代码发表完都要重新调一下格式没要不然全显示在一行，所以整个源码我放在了GitHub上了，链接为：/HailongJian…
