用css画圆

实心圆

.circle{
    width: 16px;
    height: 16px;
    background-color: #fe6000;
    -webkit-border-radius: 8px;
    -moz-border-radius:8px;
    border-radius:8px;
    position: absolute;
    margin-top: 4px;
}

空心圆

.circle1{
    color:#fe6000;
    font-size: 14px;
    text-align: center;
    width: 14px;
    height: 14px;
    line-height: 14px;
    border:1px solid #fe6000; 
    border-radius:7px;
    position: absolute;
    margin-top: 4px   
}

同心圆可利用边框

.noticebtn{
    width: 90px;
    height: 90px;
    border-radius: 55px;
    -webkit-border-radius: 55px;
    background-color: rgb(255,106,0);
    border:10px solid  rgba(255,106,0,.5);
    background-clip:content-box;
    color: #fff;
    margin: 20px auto;
    text-align: center;
    line-height: 90px;
}

.noticebtn.noticeover{
    background-color: rgb(130,223,20);
    border:10px solid  rgba(130,223,20,.5);
}