html - 创建一个内部有文字的边框

Question

我想在附件中创建一个带有文本的边框。我尝试了不同的解决方案，但找不到也适用于移动版本的解决方案。

有没有人有想法？

例子

Answer 1

div {
  height: 50px;
  width: 600px;
  border: 2px solid black;
  border-radius: 35px;
}
    
h1 {
  text-align: center;
  padding: 0 10px;
  width: 200px; /* Might to adjust this based on screen, using css media query */
  margin-top: 30px; /* Might need to play around with this value based on text size */
  margin-left: auto;
  margin-right: auto;
  background: white;
}

<div>
      <h1>This is a title</h1>
</div>

基于此 Text in Border CSS HTML ，唯一的问题是必须设置背景颜色以遮挡边框，这在您的情况下可能不相关。