UI给的图有一个单选框选中效果，一开始有些蒙，查了资料实现了，记录一下，其实不难奥
在文字前使用一个空的div,使用border画出一个圆圈，再用伪元素利用定位在圆圈中心画一个实心圆，外面的背景给一个transparent,里面给一个你想要的颜色，初始状态利用transform:scale(0)，使点不可见，加上类名active后显示出来即可，具体代码如下：
<div class="circle" id="circle" [class.active]="regionMapIfy.activeItem === item"></div> <div>高新区</div>
.circle {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #00F6FFFF;
display: inline-block;
position: relative;
cursor: pointer;
margin: 0 10px;
}
.circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px; /* 点的大小 */
height: 6px; /* 点的大小 */
background-color: #00F6FFFF; /* 点的颜色 */
border-radius: 50%;
transform: translate(-50%, -50%) scale(0); /* 初始状态，点不可见 */
transition: transform 0.3s ease; /* 动画效果 */
}
.circle.active::after {
transform: translate(-50%, -50%) scale(1); /* 选中时点可见 */
}
