前言

相信很多小伙伴小时候都有玩过摩尔庄园啊、赛尔号啦这种页游，想起来之前上学的时候，只有放寒暑假的时候才能玩，所以放假的时候都是报复性玩游戏，早上七点前不起来就亏了一样，比上网吧还争分夺秒。

如今手游的摩尔庄园出了，我也入驻了一年多了，今天就带大家动手去画一个小摩尔，重拾童年回忆。

思路解析

鼹鼠脑袋

鼹鼠脑袋的代码比较容易，就是一个正圆，相信老观众都会画了。

height: 150px;
width: 150px;
background-color: #46BFFF;
border-radius: 50%;

border-radius 的值设置为 50% 的表现形式就是一个正圆了。

鼹鼠眼睛

鼹鼠的每个眼睛都是由两个椭圆构成的，椭圆就是长宽不等的圆，也就是说，我们在正圆的基础上，将宽高任意一个进行调整，正圆就会变成椭圆了。

height: 40px;
width: 22px;
border-radius: 50%;

眼睛内的高光也是个椭圆，可以使用伪元素进行绘制，更加符合语义且减少标签嵌套数量。

鼹鼠鼻子

鼹鼠的鼻子是由一个正圆和一个高光组成的，可以发现，鼻子的高光有一个模糊的效果。

这是因为添加了滤镜 filter: blur(2px) 。我们可以看看不加滤镜的效果：

可以发现在加了滤镜之后高光显得更自然些。

鼹鼠脸

鼹鼠的脸是由两个圆+一个半圆组成的。

我们可以使用定位+伪元素的方式，拼成一张脸。同时，由于绝对定位的关系，这张脸实际上会挡住鼻子，而我们正常来说脸应该在鼻子下面，所以在画鼻子的时候，我们应该设置其 z-index 属性 大于 脸的 z-index 属性。如果圆半径大了的话，是有可能会超出 .head 的范围的，我们可以给 .head 类添加 overflow: hidden 属性防止脸溢出到头外面。

鼹鼠嘴

鼹鼠的嘴有三个部分了，一个牙齿，一个嘴，一个舌头。嘴和舌头都是半圆，这个和上面的写法差不多。

border-radius: 50% / 0 0 100% 100%

而牙齿的部分是由一个部分圆角的矩形来画的，我们单独设置矩形的下边部分的圆角：

border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;

通过绝对定位使之和嘴巴上面的线重合。