css - 带标题的 div 标签边框

Question

我需要在 div 标签周围显示一个边框，边框本身有一个标题。为了做到这一点，这是我到目前为止想出的办法

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
}
    
.componentTitle {
  font-size: 18px;
  width: 15%;
  background-color: white;
  margin-top: -25px;
}

 <div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>

如您所见，我正在使用 margin 属性将标题推到边框顶部。我不确定这是否是执行此操作的正确方法，我有以下问题。

1. 我使用像素(边距)和固定值 (-25px) 定位标题。这是一个必须在手机和平​​板电脑上也能运行的网站。这是可接受的方法吗？
2. 我将背景颜色设置为白色，这样边框就不会出现在文本后面，这样可以吗？
3. 有没有更好、更容易接受的方法来做到这一点，我不想使用 fieldset，因为我们对边界(border-radius)几乎没有控制权。

Answer 1

您可以使用三种合乎逻辑的方法来实现这一目标。

1. 您可以使用 <fieldset>用legend这是执行此操作的基本 HTML 方式。您可以找到有关此 here. 的更多信息
2. 使用带有定位的自定义 CSS，而不是负边距等:

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper .componentTitle {
  position: absolute;
  top: -25px;
  background: #fff;
  padding: 0 10px;
}

<div class='componentWraper'>
  <p class='componentTitle'>This is the title</p>This is the component body text</div>

1. 在 中使用自定义 CSS pseudo-elements :

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper::before {
  content: 'This is the title';
  position: absolute;
  top: -10px;
  padding: 0 10px;
  background: #fff;
}

<div class='componentWraper'>This is the component body text</div>