一个div只用CSS最多能画多少个圆？

暂时想到的利用div的边框、内外阴影及befor和after的伪元素实现，画6个圆，以后想到再补充：

<style>
    div{
        height: 100px;
        width: 100px;
        border-radius: 100px;
        position: absolute;
        top: 40%;
        left: 40%;
        border: solid 10px purple;
        box-shadow: 0px 0px 0px 10px red,0px 0px 0px 10px black inset;
        background: gray;

    }
    div::after{
        content:' ';
        background-color: yellow; 
        border-radius: 100px;
        display: block;
        z-index: -1;
        position: relative; 
        left: -30px;
        top: -30px;
        width: 160px;
        height: 160px;
    }
    div::before{
        content:' ';
        background-color: green; 
        border-radius: 100px;
        display: block;
        z-index: -2;
        position: absolute; 
        left: -40px;
        top: -40px; 
        width: 180px;
        height: 180px;
    }
    </style>

<div></div>

效果如下：