Html 如何向矩形元素CSS添加圆角帽形状

我需要再次帮助我在元素上创建有间隙的圆形封口

我想这样做： [带间隙和圆盖的矩形][1] [1]: https://i.stack.imgur.com/O781h.png

经过一些研究和尝试，我最终做了这件事（例如我的代码）。我对它很满意，但我想创造出更美观的圆形瓶盖，就像我的例子一样。谁能帮我一下，先谢谢你

span{
字体大小：20px；
背景：#fff；
位置：绝对位置；
顶部：-20px；
右：10px；
左：10px；
填充：4px；
}
p{
边界半径：25px；
宽度：250px；
高度：150像素；
边框：10px实心#000；
背景色：白色；
位置：相对位置；
填充顶部：15px；
}

标题会在这里出现

您可以在行尾添加一些CRICLE。可能需要稍微调整一下

span{
字体大小：20px；
背景：#fff；
位置：绝对位置；
顶部：-20px；
右：10px；
左：10px；
填充：4px；
}
p{
边界半径：25px；
宽度：250px；
高度：150像素；
边框：10px实心#000；
背景色：白色；
位置：相对位置；
填充顶部：15px；
}
p：：之后{
内容：“；
位置：绝对位置；
顶部：-9.3px；
左：5px；
宽度：10px；
高度：10px；
背景：黑色；
边界半径：50%；
z指数：1；
}
p：：以前{
内容：“；
位置：绝对位置；
顶部：-9.3px；
左：235px；
宽度：10px；
高度：10px；
背景：黑色；
边界半径：50%；
z指数：1；
}

标题会在这里出现

非常感谢我的朋友！它工作得很好，虽然我仍然需要精确地研究伪元素来理解它背后的逻辑，但非常感谢你解开了这个谜团：）同时，我不明白的是，是什么导致它处于绝对位置并使用z索引？