html - 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>