如何制作这样的边框

Question

我需要制作一个边框 使用html和css 。我尝试用显示表做，隐藏了可见性，但没有一个工作！

<div id="border">
  <div id="visible">
    <p id="yellow">Просто выберите, что Вам нужно</p>
  </div>
</div> 

#yellow { color: #dbff12; }
#border { border: 30px solid black; visibility: hidden; }
#visible { position: relative; bottom: 50px; visibility: visible; }

upd：我的意思是我需要一个围绕黄色文本的两个空心位置，如图片

Answer 1

在这种情况下，将fieldset元素与关联的legend一起使用很方便：

fieldset {
  border: 4px green solid;
}

fieldset legend {
  padding: 0 10px;
}

<fieldset>
  <legend>Просто выберите, что вам нужно</legend>
  <div>
    Оформить тендер и т.п.
  </div>
</fieldset>

Answer 2

试试这个：

fieldset {
    width: 300px;
    border:3px solid skyblue;
}

legend {
    color: orange;
    padding: 0 10px;
}

span {
    border-bottom: 1px dashed;
    margin-right: 50px;
}

<fieldset>
  <legend>Просто выберите, что Вам нужно</legend>
  <span>Other Text</span>
  <span>Other Text</span>
</fieldset>

Answer 3

您还可以使用真实标题，flex来从容器本身绘制顶部边框和其他边框....

html {
  min-height: 100%;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0.3), rgba(0, 125, 255, 0.5)), url(http://lorempixel.com/800/600/people/9) top center / cover;
}

[data-fieldset] {
  width: 600px;
  font-size: 20px;
  color: rgba(15, 215, 255, 0.9);
  text-shadow: 1px 1px 1px black;
  margin: 4em auto 1em;
  padding: 1em;
  /* prepare border */
  border: solid 10px rgba(15, 215, 255, 0.4);
  border-top: none;
}

[data-fieldset] h1 {
  font-size: 40px;
  height: 40px;
  line-height: 40px;
  /* reset in position title */
  margin: -35px -20px 1em;
  /* prepare the pseudo behavior */
  display: flex;
  align-items: center;
  color: rgba(255, 215, 16, 0.7);
}


/* draw the tops border via pseudo flex children */

[data-fieldset] h1:before,
[data-fieldset] h1:after {
  content: '';
  flex: 1;
  background: rgba(15, 215, 255, 0.4);
  height: 10px;
}


/* give some space to text */

[data-fieldset] h1:before {
  margin-right: 0.5em;
}

[data-fieldset] h1:after {
  margin-left: 0.5em;
}

<div data-fieldset>
  <h1>My example</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
</div>