CSS圆圈-可以在边框和背景色之间添加一个透明的间隙吗？

我正在用CSS创建一个圆，我想在圆的边框和背景色之间有一个间隙，这样你就可以看到背景了。这可能吗

.container{
背景：url（'https://picsum.photos/536/354');
}
.圆圈{
宽度：50px；
高度：50px；
边界半径：50px；
边框：1px纯红；
背景：红色；
}

---

您可以通过伪元素（

.circle:：after

）和以下（或类似）设置来实现这一点：

.container{
高度：100px；
背景：url（'https://picsum.photos/536/354');
}
.圆圈{
顶部：20px；
左：20px；
宽度：50px；
高度：50px；
边界半径：50%；
背景：红色；
位置：相对位置；
框大小：边框框；
}
.圆圈：：之后{
内容：''；
位置：绝对位置；
框大小：边框框；
边框：3倍纯红；
边界半径：50%；
宽度：计算（100%+16px）；
高度：计算（100%+16px）；
左：-8px；
顶部：-8px；
}

---

不是直截了当，而是有一个元素：

.container{
背景：url（'https://picsum.photos/536/354');
}
.圆圈{
宽度：50px；
高度：50px；
边界半径：50px；
边框：4倍纯红；
位置：相对位置；
}
.圆圈：：之后{
内容：''；
显示：块；
宽度：42px；
高度：42px；
背景：红色；
位置：绝对位置；
边界半径：50%；
顶部：4px；
左：4px；
}

---

您可以使用伪元素（

：例如，

之前）添加带有边框的透明“层”。使用

translate

以更通用的方式放置它（因此，如果您要更改它的大小，它将位于正确的位置）

像这样：

.container{
背景：url（'https://picsum.photos/536/354');
}
.圆圈{
位置：相对位置；
宽度：50px；
高度：50px；
边界半径：50px；
边框：1px纯红；
背景：红色；
}
.圆圈：之前{
位置：绝对位置；
最高：50%；
左：50%；
宽度：计算（100%+10px）；
高度：计算（100%+10px）；
转换：翻译（-50%，-50%）；
边框：1px纯红；
内容：“；
边界半径：50%；
}

不完全正确。OP需要透明的空间。是的，不幸的是，我不能用

框阴影做双边框，因为我需要间隙是透明的，这样它后面的图像就可以通过屏幕看到gap@MoshFeu重复答案的第二个答案说明了如何做@卡尔文纽斯，你是right@CalvinNunes是的，我的错。事实上，我也发现了这个问题，但没有读过公认的答案：/