css – 图像周围有多个边框,带填充

我想在我的图像周围创建多个边框,带有一些填充,如下所示.我更喜欢用CSS做这个,但我不知道这是否可行.

当我用Google搜索时,我只使用框阴影在对象周围找到了多个边框的examples like this.

我尝试使用边框和图像周围填充来创建它.但填充甚至没有成功,并且像上面的例子中的盒子阴影我不会得到像我想要的东西.

你们怎么处理这个问题,甚至可能吗？

编辑：
对不起,忘了展示我目前拥有的东西：code pen link

十分简单！

填充,边框和几个框阴影将起到作用.

img {    
    border-radius: 50%;
    padding: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 0 0 7px #fff, 
                0 0 0 8px #ddd;
}

Fiddle