1. 概述
最近整理CSS和大家分享一下使用 CSS3 绘制github 的章鱼猫 Logo 的过程。
先上一张全景图
网上经常能看到一些通过border属性实现的圆形，椭圆形，三角形。这里主要用到的就是CSS的border属性。通过border-radius来设置矩形的圆角。
border-radius最多可指定四个值，分别是左上角，右上角，右下角和左下角。也可以分别设置每个角的值，而且可以精确到角度的X，Y轴的值。
// 左上角
border-top-left-radius: 40px 80px;
// 右上角
border-top-right-radius: 40px 80px;
// 左下角
border-bottom-right-radius: 40px 80px;
// 右下角
border-bottom-left-radius: 40px 80px;
40px和80px分别表示X轴参与弯曲弧度的部分为40px，Y轴参与弯曲的弧度为80px。
2. 开始绘制
章鱼猫的所有部位都是通过div元素标签绘制再通过定位进行组合，首先绘制出头部的轮廓。通过设置四个角度的圆角画出大饼脸。
position: absolute;
border: 1px solid red;
width: 268px;
height: 204px;
left: 116px;
top: 77px;
border-top-left-radius: 137px 94px;
border-top-right-radius: 137px 94px;
border-bottom-left-radius: 105px 95px;
border-bottom-right-radius: 104px 82px;
加上耳朵。
position: absolute;
border: 1px solid red;
width: 60px;
height: 60px;
transform: rotate(12deg);
top: 66px;
left: 133px;
border-top-right-radius: 150px 36px;
border-bottom-left-radius: 43px 95px;
五官
胡须
position: absolute;
height: 8px;
width: 98px;
top: 222px;
left: 26px;
border-top-left-radius: 98px 10px;
border-top: 1px solid red;
四只脚和小尾巴，可以使用border属性来设置。
border-right: 6px solid red;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;
不过这里偷懒了，直接使用模块绘制的。
3. 填充颜色
整体完成之后添加上颜色。
已经变得有模有样了，继续~
最后装饰一下小尾巴！
完成！
