html - CSS:使用边框半径将边框与圆形元素合并

Question

我得到了一个看起来像这样的东西的模型:

有没有一种方法可以在不使用 CSS3 图像的情况下做到这一点？带有圆 Angular 的边框周围的东西似乎是不可能的......具有圆形底部边框的灰色背景的部分似乎也使事情变得更加困难，因为否则它可能没有边框。请注意，当它们放在一起时，边框不应该更宽，它们应该到处都是 2px。

Answer 1

使用负边距! demo

HTML

<section>
    <h1>Header</h1>
    content
</section>

CSS

section, h1 {
    border: 2px solid #c0c0c0;
    border-radius: 10px;
    padding: 8px;
}

h1 {
    background: #e0e0e0;
    margin: -10px;
    margin-bottom: 8px; 
}