Html 为图像创建双圆形边框

我希望我的图像周围有双圆形边框，实际上是正方形的图像

我试着创造。这是js。我想要的正是

这是密码

CSS

.home_boxes {
    background: none repeat scroll 0 0 #f1917b;
    color: #ffffff;
    padding: 40px 0;
    text-align: center;
}
img {
    border: 5px solid #ffffff;
    border-radius: 50%;
    margin: 20px;
    outline: 2px solid #ffffff;
    outline-offset: 9px;
}
img:before {
    border: 5px double #ff0000;
    border-radius: 50%;
    bottom: 10px;
    content: "";
    left: 10px;
    position: relative;
    right: 10px;
    top: 10px;
}

HTML

<div class="home_boxes">
   <div class="col-md-4">
       <img src="http://placehold.it/310x311">
    </div>  
 </div>

---

非常感谢您的帮助。

使用

框影

。它可以有几个值：

img {
    /* first white ring */
    border: 5px solid #ffffff;
    /* background 5px ring + ring link border */
    box-shadow: 0 0 0 5px #f1917b, 0 0 0 10px #fff;
    border-radius: 50%;
    margin: 20px;
}

---

带有双圆边框。

如果图像不是透明的PNG。您可以使用

填充

和

背景

，如下所示

img {
    border: 5px solid #ffffff;
   padding:5px; background:blue;
    border-radius: 50%;
    margin: 20px;
}

---

这里的演示---->

喜欢吗？我尝试了双边框，但双边框并不能解决问题，因为我已经给出了屏幕截图的链接，这已经是我所需要的了。内边框我需要厚5px宽，然后一些psace n，然后外边框只有1px。您正在尝试使用

img:before

，但并非所有浏览器都支持这一点（因为使用

:before

/

:after

创建的伪元素应该呈现为在第一个/最后一个位置插入了实际的子元素，但是

img

不能在HTML中包含子元素。）我认为，您需要在图像周围添加一个额外的元素，请参见@CBroe将此添加为答案，我将接受此内容。。