Question

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

我尝试过创作。这是js fiddle。我想要的确切地是this

这是代码

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>

请非常感谢任何帮助。

Answer 1

使用box-shadow。它可以有几个值：

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;
}

带有双圆圈边框的

Fiddle。

Answer 2

如果图像不是透明的PNG。您可以使用padding和background，如下所示;

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

演示这里----＆gt; FIDDLE

为图像创建双圆边框

2 个答案: