前面的答案是不正确的,如果你想知道为什么尝试这个:
<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>
Run Code Online (Sandbox Code Playgroud)
AFAIK 没有办法产生该legend元素在 的边界上造成的边界破坏效果fieldset。fieldset我不认为单独使用 CSS 是可能的,它只是标签渲染方式的一部分。
澄清:我不知道有什么方法可以定位块或内联元素,使其横跨其包含块元素的可见边框,然后导致容器元素的边框在其框后面被打破。这就是 a<legend>对其包含元素的边框所做的事情<fieldset>。