css实现仿element ui配色的小圆圈状态标记

实现的效果如图

css代码如下

.status-info{
  display:inline-block;
  width: 7px;
  height:7px;
  background:#f4f4f5;
  border-radius:50%;
  border:1px solid #909399;
}
.status-primary{
  display:inline-block;
  width: 7px;
  height:7px;
  background:#ecf5ff;
  border-radius:50%;
  border:1px solid #409eff;
}
.status-success{
  display:inline-block;
  width: 7px;
  height:7px;
  background:#f0f9eb;
  border-radius:50%;
  border:1px solid #67c23a;
}
.status-waring{
  display:inline-block;
  width: 7px;
  height:7px;
  background:#fdf6ec;
  border-radius:50%;
  border:1px solid #e6a23c;
}
.status-danger{
  display:inline-block;
  width: 7px;
  height:7px;
  background:#fef0f0;
  border-radius:50%;
  border:1px solid #f56c6c;
}