css绘图（二）：教你用css绘制一个大白！

教你用css绘制一个大白
不用ps，用css就可以绘制一个动漫形象。
如图：
其实很简单，就是一些盒子的堆叠，以及盒子的层级关系。
（本人绘制的稍微有点简陋，见笑）
盒子身体部分代码如下：

对应身体的样式为：
body{
background: gray;
}
.head{
width:200px;
height:120px;
background: white;
margin:0 auto;
border-radius: 50%;
border-bottom: 8px solid #E0E0E0;
z-index: 100;
position: relative;
}
.eye,.eye2{
width:20px;
height:20px;
background: black;
border-radius: 50%;
position: relative;/!!!/
left:50px;
top: 60px;
}
.eye2{
top:40px;
left:130px;
}
.mouth{
width:80px;
height:7px;
background: black;
position:relative;/!!!/
top:25px;
left:60px;
}

/头部结束*****/
.xin,.du{
margin:0 auto;
width:310px;
height:350px;
background: white;
border-radius:47%;
border:8px solid #E0E0E0;
border-top:none;
z-index: 1;
}
.xin{
margin-top:-20px;
}
.du{
width:420px;
height:480px;
margin-top:-230px;
z-index: 5;
}
.dudu{
width:350px;
height:200px;
border-radius: 50%;
background: white;
margin:0 auto;
position: relative;/过渡!!!/
}
/***************************/
.heart{
width:50px;
height:50px;
border-radius: 50%;
border:1px solid #ccc;
position: relative;/!!!/
box-shadow:8px 10px 8px #ccc inset;
right:-200px;
top:60px;
}
.left_arm,.right_arm{
width:100px;
height:350px;
background: white;
border-radius:50%;
position:absolute;
left:415px;
top:130px;
transform: rotate(31deg);
z-index: 0;
}
.right_arm{
position:absolute;
left:915px;
top:130px;
transform: rotate(-31deg);

    }
    .finger_l,.finger_r{
    	width:30px;
    	height:30px;
    	background: white;
    	border-radius: 50%;
    	position:absolute;
    	top:360px;
    	left:40px;
    }
    .leg_left,.leg_right{
        width:140px;
        height:250px;
        background: white;
        border-radius:0 0 0 50%;
        position: absolute;
        top:600px;
        left:550px;

    }
    .leg_right{
    	border-radius:0 0 50% 0;
    	position: absolute;
        top:600px;
        left:720px;
    }

如上即可用css绘制大白，可自行发挥想象力。