引言
不知道大家有没有去看大侦探皮卡丘呀，有没有被银幕上毛茸茸的电老鼠萌到呢？现在我就来教大家用CSS画一只简易版的皮卡丘吧，小白可学。(希望不会收到东半球最强法务部的律师函)
ps：以下部分代码隐去具体的宽高和位置，具体代码在阅读原文可看。
废话不多说，让我们打开编辑器
html对应结构如下：
我们分开来看，首先是最简单的眼睛和腮红(电极)，只有两个圆，只要让border-radius属性和width、height相同就可以画出两个圆，再用定位属性去寻找位置。
/*画出圆*/
.eye{
background: #4E4700;
width: 23px;
height: 23px;
border-radius: 23px;
}
/*寻找位置*/
.eye.left{
position: absolute;
left:38px;
top:44px;
}因为CSS的border-radius属性设置元素的外边框圆角，使用一个直径来确定一个圆形。当元素四个边角都是四分之一圆弧，那就可以拼成一个圆。
然后就是下半截的各类半圆形的球，扣子。半圆怎么画呢，上面的圆通过四个四分之一圆弧来画，半圆岂不只要两个？
没错，当border-radius属性有四个值的时候，就会按左上、右上、右下、左下的顺时针方向去指定四个角。我们让上面的两个都是0，下面的都是圆的直径，再让高度等于半径，就可以画出一个半圆啦。
.ball{
border-radius:0 0 200px 200px;
width:200px;
height:100px;
background:#FF0000;
}
其他的以此类推，把精灵球的扣子也做出来，再用z-index来让他们按层次出现就好啦，代码如下：
.belt{
/*画黑带*/
background:#322221;
border-radius:0 0 2px 2px/0 0 15px 15px;
display: flex;
justify-content: center;
}
.lock{
/*画半圆*/
border-radius: 0 0 80px 80px;
}
.lock::after{
/*使用伪元素可以在css里添加代码而不影响HTML结构的可读性*/
content: "";
display:block;
border-radius: 0 0 60px 60px;
background:#FDFDFD;
transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px);
}/*剩下的两个半圆方法差不多就不赘述了*/
剩下的部分就有点棘手了，因为耳朵和嘴巴弧线部分比较多，不过我们把弧线看作椭圆的边的话，也是可以利用border-radius属性来解决。当我们使用两组值的时候就可以设置边框的弧度。形如
border-radius: 20px 20px 20px 20px /
70px 70px 20px 20px;
斜杠前面的四个值，分别是左上起顺时针一圈的x,后面的四个值就是对应的y，这样就可以调整元素画出大概的弧度。
.ear.left{
background: #ffe000;
width:40px;
height:90px;
border-radius: 20px 20px 20px 20px/70px 70px 20px 20px;
/*隐藏耳朵尖溢出部分*/
overflow: hidden;
}画出的效果是这样的
然后给他加个after伪元素来画耳朵尖
.ear.left::after{
content: "";
display: block;
width:30px;
height:20px;
background: #4E4700;
}就变成这样
然后使用transform来给原来的 .ear.left 旋转一个角度就完成了，rotate是旋转，deg指角度的单位，负号代表逆时针选择。
rotate(-30deg); -webkit-transform: >rotate(-30deg); -moz-transform: >rotate(-30deg); -o-transform: >rotate(-30deg);
然后嘴巴也是大同小异，左半唇和右半唇分别是一个只有左下和右下角的元素，旋转之后使用绝对定位拼在一起就可以啦。
高光部分画个白色椭圆，方法就是把上面涉及的综合一下。
.light{
background:#FFD7C9;
width: 20px;
height: 27px;
border-radius: 10px 10px 10px 10px/15px 15px 10px 10px;
transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
}
接下来就大功告成。
