.eyes-box{ width: calc(100% - 8px); height: 160px; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); top: 55px; z-index: 10; .eyes-left-background{ width: 156px; height: 156px; border-radius: 50%; background: #f7ba8b; position: absolute; top: 0; left: 0; transform: scale(1); } } 仔细观察，你会发现眼镜的部分其实是圆形的嵌套，一层套一层的圆形，只需要处理好圆形的位置即可。 .eyes-box{ width: calc(100% - 8px); height: 160px; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); top: 55px; z-index: 10; .eyes-left-background{ width: 156px; height: 156px; border-radius: 50%; background: #f7ba8b; position: absolute; top: 0; left: 0; transform: scale(1); .left-orbit{ width: 70%; height: 70%; border-radius: 50%; border: 5px solid #542114; bottom: 10px; position: absolute; left: 10%; transform: scale(1); background: #ce8662; z-index: 10; .left-eyeball{ width: 60%; height: 60%; border: 3px solid #542114; border-radius: 50%; margin: 10px 0px 0px 10px; background: #7c3e37; transform: scale(1); &::before{ content: ''; width: 60%; height: 60%; background: #542418; position: absolute; top: 0; border-radius: 50%; left: 5px; } &::after{ content: ''; width: 20%; height: 20%; background: #fff; position: absolute; top: 4px; border-radius: 50%; left: 12px; } } } } } 左右的眼睛是一样的，左眼写好了后直接复制，将定位的位置改一下即可 .eyes-box{ width: calc(100% - 8px); height: 160px; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); top: 55px; z-index: 10; .eyes-left-background,.eyes-right-background{ width: 156px; height: 156px; border-radius: 50%; background: #f7ba8b; position: absolute; top: 0; transform: scale(1); .left-orbit,.right-orbit{ width: 70%; height: 70%; border-radius: 50%; border: 5px solid #542114; bottom: 10px; position: absolute; transform: scale(1); background: #ce8662; z-index: 10; .left-eyeball,.right-eyeball{ width: 60%; height: 60%; border: 3px solid #542114; border-radius: 50%; margin: 10px 0px 0px 10px; background: #7c3e37; transform: scale(1); &::before{ content: ''; width: 60%; height: 60%; background: #542418; position: absolute; top: 0; border-radius: 50%; left: 5px; } &::after{ content: ''; width: 20%; height: 20%; background: #fff; position: absolute; top: 4px; border-radius: 50%; left: 12px; } } } /* 分别对左右的眼睛进行微调 */ .left-orbit{ left: 10%; } .right-orbit{ right: 10%; } } /* 分别对左右的眼睛进行微调 */ .eyes-left-background{ left:0 } .eyes-right-background{ right:0 } /* 绘制眼镜架 */ .link-eyse{ width: 28px; height: 4px; background: #542114; position: absolute; left: 50%; top: 54%; transform: translate(-50%); z-index: 10; } } 眼睛的位置处理完后，再处理嘴巴的位置 嘴巴部分 嘴巴其实也是圆形和椭圆的组合 这里用一个标签实现程序猿的嘴巴部分 先利用圆角实现嘴巴 • 1 .mouth{ width: 170px; height: 128px; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); border-radius: 35% 35% 35% 35% / 50% 50% 50% 50% ; /* 实现嘴巴的形状 */ background: #f7ba8b; border: 3px solid #81312a; } 然后利用伪元素实现鼻子和嘴唇，鼻子的位置利用box-shadow绘制多个阴影实现鼻孔的效果 对于box-shadow不理解的小伙伴请看这篇：box-shadow说明 .mouth::before{ content: ''; width: 15px; height: 15px; border-radius: 50%; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); box-shadow: -15px 0px 0px 0px #81312a,15px 0px 0px 0px #81312a; /* 绘制鼻孔 */ } 嘴巴部分利用伪元素配合圆角，绘制一个椭圆 伪元素说明文档 （点击直达） .mouth::after{ content: ''; width: 30px; height: 12px; border-radius: 50%; background: #eb6e6e; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } 程序猿的头部到这里就大致完成了，我们看下效果 最后再处理一下头发部分，这里的头发用的是svg标签，头发的父级就是最外层的头部标签，将头发居中，然后定位到头部的上方即可 svg说明文档（点击直达） .hair{ position: absolute; top: -85px; left: 50%; transform: translateX(-50%); width: 100px; .st0{fill:#81312A;width: 100%;} } 到这里我们的csdn程序猿就完成了，最后再看一下官方原图： 总结 1、利用圆角实现不规则原型 2、重复的元素可以公用css样式，节省代码 3、利用z-index来实现层级关系 4、box-shadow实现多个同元素复制 5、复杂图形可以用svg实现 案例源码：https://gitee.com/wang_fan_w/css-diary 如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~