漏刻有时数据大屏CSS样式表成长教程(3)：使用样式表做圆环指示图标

核心样式表

.dot1 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #FF4145;
    border-radius: 50%;
    background: transparent;
    margin-left: 10px;
    margin-right: 5px;
}

.dot2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #FF8D00;
    border-radius: 50%;
    background: transparent;
    margin-left: 10px;
    margin-right: 5px;
}

.dot3 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #FDFF00;
    border-radius: 50%;
    background: transparent;
    margin-left: 10px;
    margin-right: 5px;
}

代码分析

    border-radius: 50%;
    border: 2px solid #FF4145;
    background: transparent;

1. 将block块通过border-radius: 50%转为圆;
2. 设置圆的边框border: 2px solid #FF4145;
3. background: transparent背景色为透明;

@lockdata.cn