[分享]CSS3教程画画简单可爱

CSS3教程可以帮助我们更好地布局网页、美化页面样式，本文将介绍如何使用CSS3绘画简单可爱的图案。

/* 圆形头像 */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f2a5b5;
}

/* 心形按钮 */
.btn-heart {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fe6f5e;
  position: relative;
}
.btn-heart::before, .btn-heart::after {
  content: ';
  position: absolute;
  background-color: #fe6f5e;
  border-radius: 50%;
}
.btn-heart::before {
  top: -25px;
  left: 0;
  width: 50px;
  height: 50px;
}
.btn-heart::after {
  top: 0;
  left: 25px;
  width: 50px;
  height: 50px;
}

/* 苹果按钮 */
.btn-apple {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #848b95;
  position: relative;
}
.btn-apple::before, .btn-apple::after {
  content: ';
  position: absolute;
  background-color: #fe6f5e;
  border-radius: 50%;
}
.btn-apple::before {
  top: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
}
.btn-apple::after {
  top: 10px;
  left: 28px;
  width: 4px;
  height: 40px;
} 

以上代码为绘制圆形头像、心形按钮、苹果按钮的CSS代码，简单明了。

尝试一下，将以上代码复制到自己的CSS文件中，结合HTML代码使用，就可以得到简单可爱的图案。