html部分
<body>
<div class="board">
<div class="android">
<div class="head"></div>
<div class="body"></div>
<div class="arms"></div>
</div>
</div>
</body>
CSS部分
<style>
body{
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.board{
width: 600px;
height: 440px;
margin: 80px auto;
background-color: #fff;
}
.android{
width: 340px;
height: 330px;
margin: 0 auto;
position: relative;
text-align: center;
}
/*脑袋*/
.head{
position: relative;
width: 220px;
height: 110px;
margin: 30px auto;
top: 20px;
border-radius: 100px 100px 0 0;
background-color: #a4ca39;
box-shadow: 5px 5px 10px 5px #666;
}
/*眼睛*/
.head::before,.head::after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
position: absolute;
top: 40px;
}
/*眼睛*/
.head::before{
left: 50px;
}
.head::after{
right: 50px;
}
/*身体*/
.body{
width: 220px;
height: 180px;
background-color: #a4ca39;
border-radius: 0 0 20px 20px;
position: relative;
margin: 0 auto;
box-shadow: 5px 5px 10px 5px #666;
}
/*两边的手臂*/
.arms::before,.arms::after{
content: '';
display: block;
width: 50px;
height: 150px;
border-radius: 25px;
position: absolute;
background-color: #a4ca39;
top: 15px;
}
/*左手*/
.arms::before{
box-shadow: -5px 5px 10px 0 #666;
top: 135px;
left: 8px;
}
/*右手*/
.arms::after{
right: 8px;
box-shadow: 5px 5px 10px 0 #666;
}
/*腿部*/
.body::before,.body::after{
content: '';
display: block;
width: 50px;
height: 80px;
border-radius: 0 0 25px 25px;
position: absolute;
bottom: -80px;
background-color: #a4ca39;
box-shadow: 5px 10px 10px 0 #666;
}
/*左腿*/
.body::before{
left: 20px;
}
/*右腿*/
.body::after{
right: 20px;
}
</style>
效果如下: