核心方法是使用 box-shandow 阴影来进行一些操作。我们可以阴影的控制，当然，我们可以设置多个阴影，且在渐变项为 0 的时候，其实就是绘制出了单纯的色块。
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/* 这里就是头部的绘制 */
div {
position: relative;
width: 36px;
height: 36px;
margin: 300px auto;
border-radius: 50%;
background: #c63d01;
box-shadow: 0 0 0 1px #000,
-20px -26px 0 -10px #333,
-34px -40px 0 15px #fff,
-34px -40px 0 16px,
20px -26px 0 -10px #333,
34px -40px 0 15px #fff,
34px -40px 0 16px,
0 55px 0 75px #fff,
0 55px 0 76px #000,
0 22px 0 120px #08bdeb,
0 22px 0 121px #000;
}
/* 这里就是鼻子的绘制 */
div::before {
content: '';
position: absolute;
bottom: -81px;
left: 17px;
height: 80px;
width: 2px;
background: #000;
}
/* 这里就是嘴巴的绘制 */
div::after {
content: '';
position: absolute;
bottom: -83px;
left: -42px;
height: 70px;
width: 120px;
border-bottom: solid 2px #000;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 60px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
