Question

我是css的新手，但我尝试做的事情有点复杂，至少对我而言。我有一张照片，我想用一个圆圈覆盖，内部透明，外面是黑色。这是我迄今为止所取得的成就：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

在css边界的轮廓

1 个答案: