“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。这个方法我们在后面还会很频繁的使用到。
耳朵
绘制完头部轮廓之后，我们可以把耳朵的轮廓也加上，本来计划是将耳朵写在头部
内部的，但是因为要考虑层级压盖的情况，还是把耳朵要素单独的放在了外面。这里有一个关键属性就是transform: rotate(Xdeg)用来对要素做旋转，我们可以将耳朵旋转成对应的角度。
/*左耳朵*/
.earLeft {
height: 50px;
width: 70px;
/* background-color: #e1b79b; */
border-radius: 200px 200px 100px 100px;
border: 3px solid #a57662;
transform: rotate(-49deg);
position: absolute;
top: 10px;
left: 12px;
}/*右耳朵*/
.earRight {
height: 50px;
width: 70px;
/* background-color: #e1b79b; */
border-radius: 200px 200px 100px 100px;
border: 3px solid #a57662;
transform: rotate(40deg);
position: absolute;
top: 10px;
right: 0;
}
眼睛
接下来就开始填充绘制头部里面的内容，头部里面主要是眼睛，鼻子和嘴巴，我们先来画眼睛，为了看的清楚，我们就把头部填充上颜色了。
/*左眼白*/
.head .eyeLeft {
height: 78px;
width: 67px;
background-color: #ffffff;
border-radius: 50% / 50%;
transform: rotate(20deg);
position: absolute;
top: 113px;
left: 68px;
} /*左眼珠*/
.head .eyeConLeft {
width: 28px;
height: 33px;
background-color: #511313;
position: absolute;
border-radius: 50%/50%;
transform: rotate(-13deg);
top: 20px;
right: 15px;
}
/*右眼白*/
.head .eyeRight {
height: 78px;
width: 67px;
background-color: #ffffff;
border-radius: 50% / 50%;
transform: rotate(-20deg);
position: absolute;
top: 113px;
right: 68px;
}
/*右眼珠*/
.head .eyeConRight {
width: 28px;
height: 33px;
background-color: #511313;
position: absolute;
border-radius: 50%/50%;
transform: rotate(13deg);
top: 20px;
left: 15px;
}
嘴巴
绘制了眼睛之后，我们来绘制嘴巴，嘴巴没有太特殊的地方，我们用正常椭圆就可以。
