我想达到这个效果：
但有图像背景.我尝试了我能想到的一切,但似乎我仍然得到这个：
很明显,背景颜色：透明不起作用,也不设置颜色.我想也许有一个“黑客”,我可以使用它来使我的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>
解决方法
您可以单独创建顶部边框(左侧带有伪内容).
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>
