Html 如何在背景上方和边框后面的按钮右上角添加一个圆？

我想通过使用CSS实现以下结果：

基本上，我希望圆圈位于按钮背景的顶部，但在其边框的后面，按钮位于背景的顶部

使用以下代码，我可以绘制一个类似的按钮：

.container{
边缘顶部：30px；
}
钮扣{
字体大小：20px；
边框：2件纯黑；
填充：8px 20px；
位置：相对位置；
}
.容器.圆圈{
位置：绝对位置；
顶部：-21px；
右：-21px；
宽度：40px；
高度：40px；
-webkit边界半径：25px；
-moz边界半径：25px；
边界半径：25px；
背景：#4da6ff；
}

测试按钮

使用伪元素（

：：after

）在圆上方绘制边框：

.container{
边缘顶部：30px；
}
钮扣{
位置：相对位置；
字体大小：20px；
边界：无；
填充：8px 20px；
}
按钮：：之前{
位置：绝对位置；
顶部：-20px；
右：-20px；
宽度：40px；
高度：40px；
边界半径：25px；
背景：#4da6ff；
内容：''；
}
按钮：：之后{
位置：绝对位置；
顶部：-2px；
右：-2px；
底部：-2px；
左：-2px；
边框：2件纯黑；
内容：''；
}

测试按钮

一个想法是整合圆内缺失的边界

.container{
边缘顶部：30px；
}
钮扣{
字体大小：20px；
边框：2件纯黑；
填充：8px 20px；
位置：相对位置；
}
按钮：之前{
内容：“；
位置：绝对位置；
顶部：-1px；
右：-1px；
转换：翻译（50%，-50%）；
宽度：40px；
高度：40px；
边界半径：50%；
背景：
线性渐变（黑色，黑色）左/50%2px，
线性梯度（黑色，黑色）底部/2px 50%，
#4da6ff；
背景重复：无重复；
}

测试按钮

除了Ori的解决方案，您还可以尝试使用z索引：