css多个圆圈套圆圈实现 |css 字数超出省略号代替

.circle {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
}
.circle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
}
.circle:before:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: #000;
}

上面这段CSS代码实现了一个黑色的圆圈，里面嵌套着一个白色的圆圈，再里面又嵌套着一个黑色的小圆圈。其中，.circle是最外层的圆圈，伪元素:before在.circle内生成了一个白色的圆圈，在:before内再生成了一个黑色的小圆圈。

通过调整每个圆圈的大小和位置，以及改变圆圈的颜色，大家可以实现各种不同的效果。这种嵌套的方法可以实现更多级别的圆圈嵌套，让你的页面看起来更加有趣。