我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

CSS作为前端三剑客之一，在这个各种UI、动画库横飞的时代，日常工作中我们很少专门去写CSS，今天就让我们返璞归真，用CSS画出一个兔头。

实现

我们来分析下怎么实现这个兔头，兔头有眼、鼻子等器官，所以我们通过CSS将器官画出来然后通过position定位拼在一起就得到我们想要的兔头啦。这里重点就是将各个器官部位画出来，有些就非常简单比如眼，有些就麻烦点比如嘴巴，具体的实现过程如下：

脸。脸就是一个圆形，我们通过border-radius属性，将属性值设置为高度，就可以轻松将边框div变成圆形。再设置成flex布局，方便对眼、鼻子等进行展示。

    .face {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #000;
        position: relative;
      }

眼睛。眼镜也是通过border-radius将边框div变成圆形，将背景色变成黑色就行。
鼻子。鼻子依旧通过border-radius进行设置，这个边框弧度就是不规则的，这里我们可以借助[工具](Fancy Border Radius Generator (9elements.github.io))得到一个不规则的边框。

   .nose {
        width: 20px;
        height: 20px;
        border-radius: 53% 47% 54% 46% / 26% 34% 66% 74%;
        background: black;
        position: relative;
      }

嘴巴。嘴巴分成左右两部分，将左边弄好右边镜像就可以，首先我们需要弄出一个‘曲线’，将‘曲线’通过transform进行旋转就可以。要想得到曲线，我们将div底部边框设置出来，再设置border-radius得到我们的‘曲线’。

   .mouse {
        width: 20px;
        height: 10px;
        border-bottom: 2px solid #000;
        border-radius: 57% 43% 51% 49% / 34% 32% 68% 66%;
      }
      .left-mouse {
        transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        position: absolute;
        left: -10px;
        top: 15px;
      }

耳朵。耳朵分左右跟里外四部分，做出一个其他就都出来啦。耳朵比嘴巴方便，将边框div上左跟上右进行弧度设置，外层耳朵底部边框设置为none。再将耳朵进行旋转就得到兔子的耳朵。

   .ear {
        width: 30px;
        height: 50px;
        background: white;
        border: 1px solid #000;
        border-bottom: none;
        border-radius: 50% 50% 0 0;
        position: absolute;
        top: -42px;
      }
      .left-ear {
        transform: rotate(-25deg);
        -webkit-transform: rotate(-25deg);
        left: 5px;
      }

以上所有的器官准备就绪，接下来我们通过absolute绝对定位将耳朵、鼻子进行拼接。耳朵是对应脸进行定位，嘴巴对应鼻子进行定位。所以我们将.face跟.nose添加了position:relative。

总结

兔年将一个憨憨的兔头送给大家，希望大家看到兔头就会很开心，也欢迎大家对兔头进行‘整容’，让它更好看。

「兔了个兔]——纯CSS实现兔头

前言

实现

总结