Css画简单的卡通人物 |css盒模型的组成

/* 画圆 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffa500;
}
/* 画眼睛 */
.eye {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 30px;
left: 30px;
box-shadow: 2px 2px #000;
}
/* 画嘴巴 */
.mouth {
width: 50px;
height: 20px;
background-color: #000;
border-radius: 50px 50px 0 0;
position: absolute;
top: 60px;
left: 25px;
}
/* 画脸 */
.face {
width: 120px;
height: 80px;
border-radius: 50%;
background-color: #ff6347;
position: absolute;
top: 10px;
left: -10px;
}
/* 画眼眉 */
.eyebrows {
width: 40px;
height: 10px;
background-color: #000;
position: absolute;
top: 20px;
}
.left-eyebrow {
transform: rotate(-45deg);
left: 20px;
}
.right-eyebrow {
transform: rotate(45deg);
right: 20px;
}

使用上面的代码可以画出一个简单的卡通人物。先画圆，然后在圆上加眼睛、嘴巴和脸。最后再加上眼眉就完成了。