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

Question

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

当我用Google搜索时,我只发现这样的例子,使用框阴影直接在对象周围有多个边框.

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

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

编辑:对不起,忘了显示我目前拥有的:代码笔链接

这就是我想要做的

Answer 1

十分简单!

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

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