使用CSS3代码绘制可爱的Hello Kitty猫(5)

蝴蝶结分为两个外边，三个圆。外边是整个绘画过程中最难画的地方，用矩形调整 radius 参数很难做到没有偏差，因为它不像是更圆润的矩形，而像是更圆润的三角形。在这里，我们把它分成四块，各个外边各两块，在块内绘制好对应的区域，再利用 overflow: hidden; 来隐藏多余的部分。然后是三个圆，相对简单。
 
代码量实在太多，就不贴出来了，大概思路就这样子。

眼睛，鼻子

眼睛和鼻子相对简单，就不贴代码了。

胡须

因为胡须是弯弯的，所以每根胡须需要两个元素来实现，我们就用 :before 和 :after 吧。

某一根胡须的代码：

CSS Code复制内容到剪贴板

.hello-kitty-div .left-moustache-1:before {   

    content: '\20';   

    display: block;   

    position: absolute;   

    left: 20px;   

    top: 420px;   

    width: 100px;   

    height: 24px;   

（编辑：ASP站长网）