css 原子库 |css如何让头像圆形

.btn {
display: inline-block;
font-size: 16px;
padding: 10px 20px;
background-color: #f60;
color: #fff;
border: none;
}

使用CSS原子库，可以将上述代码拆分成若干个最小单元来管理，例如：

.display-inline {
display: inline-block;
}
.font-size-16 {
font-size: 16px;
}
.padding-10-20 {
padding: 10px 20px;
}
.bg-color-f60 {
background-color: #f60;
}
.color-fff {
color: #fff;
}
.border-none {
border: none;
}
.btn {
@extend .display-inline;
@extend .font-size-16;
@extend .padding-10-20;
@extend .bg-color-f60;
@extend .color-fff;
@extend .border-none;
}

这样，只需要通过组合这些最小单元来创建新的CSS样式，可以大大提高CSS开发效率和管理的便捷性。