当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
我想在我的图像周围创建多个边框,带有一些填充,如下所示.我更喜欢用CSS做这个,但我不知道这是否可行. 当我用Google搜索时,我只使用框阴影在对象周围找到了多个边框的examples like thi
我想在我的图像周围创建多个边框,带有一些填充,如下所示.我更喜欢用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

网友评论