如何制作不规则的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>。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要将图例置于Firefox中心，请使用<legend align="center">