父母的重叠边界与h2边际负面

Question

我想达到这个效果:

但有图像背景.我尝试了我能想到的一切,但似乎我仍然得到这个:

很明显,它background-color: transparent不会起作用,也不会设置颜色.我想也许有一个"黑客",我可以使用它来使我的h2重叠框的边框.

.box {
  border: 1px solid white;
}

.box h2 {
  margin: -15px auto 20px;
  width: 250px;
  font-size: 25px;
}

<div class="box">
  <h2>ABOUT US</h2>
</div>

Answer 1

您可以单独创建顶部边框(左侧和右侧使用伪内容).

body {
    background: gold;
}
div {
    border: 1px solid black;
    border-top-width: 0;
    text-align: center;
}
h2 {
    display: table;
    width: 100%;
    margin-bottom: -10px;
}
h2:before, h2 > span, h2:after {
    display: table-cell;
    white-space: nowrap;
}
h2 > span {
    padding: 0 10px;
    position: relative;
    top: -10px;
}
h2:before, h2:after {
    content: "";
    border-top: 1px solid black;
    width: 50%;
}

<div>
    <h2><span>Hello World</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>