html - 如何制作不规则的CSS边框

Question

我正在尝试使用 CSS 来做到这一点:

白色背景很容易做到，但是如果它有背景图像，我该如何做这个布局呢？这就是我的意思:

我实际上是将一个 div 绝对定位在另一个里面:

<div class="main-div">
  <div class="main-div-overlay-text">
    SOME TEXT
  </div>
  SOME TEXT HERE
</div>

.main-div {
  position: relative;
  width: 200px;
  height: 150px;
  border: 2px solid white;
}

.main-div-overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top:-10px;
}

Answer 1

尝试使用 <fieldset>和 <legend> .

body {
  background: grey;
}
fieldset {
  border: 1px solid white;
  color: white;
  text-align: center;
  width: 200px;
}
legend {
  padding: 0 10px;
}

<fieldset>
  <legend>Title</legend>
  <p>Text</p>
</fieldset>

要在 Firefox 中将图例居中，请使用 <legend align="center">