CSS 实心圆、空心圆效果

image.png

实现上图红色空心的效果的大致CSS代码如下

.redMarker {
    width: 8px;
    height: 8px;
    border: 2px solid #fe4800;
    border-radius: 4px;
}

实现上图灰色实心的效果的大致CSS代码如下

.grayMarker {
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background-color: #808080;
    opacity: 0.5;
}

相关html代码

<div class='frequentlyQuestions'>
    <div class='frequentlyQuestionsDesc'>
        <div class="redMarker">
        </div>
        <strong style="padding-left:3px;">下面是大家常温的问题呦~</strong>
    </div>
    <div class='frequentlyQuestionsContent'>
        <div class='frequentlyQuestionListBig'>
            <div class='frequentlyQuestionList frequentlyQuestionsLine'>账号（认证、换绑、登录） <span id='showHide' class='iconfont icon-xialajiantou'></span>
            </div>
            <div id='smallList'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>  如何进行营业执照认证</span>
            </div>
            <div id='smallList'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>如何找到手机号</span>
            </div>
            <div id='smallList'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>密码玩了个怎么玩</span>
            </div>

        </div>
        <div class='frequentlyQuestionListBig'>
            <div class='frequentlyQuestionList frequentlyQuestionsLine'>信息问题（被删除、不显示） <span id='showHide' class='iconfont icon-xialajiantou'></span></div>
        </div>

        <div class='frequentlyQuestionListBig'>
            <div class='frequentlyQuestionList'>其他问题（毛用、举报） <span id='showHide' class='iconfont icon-xialajiantou'></span></div>
        </div>
    </div>
</div>