CSS边框的轮廓

Question

我是CSS的新手，但是我想做的事情有点复杂，至少对我而言。 我有一幅想要用圆圈覆盖的图片，里面是透明的，外面是黑色的。 到目前为止，这是我已经完成的工作：

 .roundedBorder { border: 1px solid #1EC865; border-width: 4px; border-radius: 81px; } .img { position:absolute; top:6px; left:6px; width:81px; } 

 <img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> <div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> </div> 

https://jsfiddle.net/dmL56kek/

现在，我希望用纯色覆盖圆形的外部。

PS：我不想在图像上应用任何样式，因为它在我的情况下不起作用。

Answer 1

一个小小的变化是css会有所帮助，我使用width:78px进行计算，即外部div的宽度为70px，边框从左和右为4px。

 .roundedBorder { border: 1px solid #1EC865; border-width: 4px; border-radius: 81px; } .img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;} 

 <img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> <div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> </div>