字段集和图例周围的正确圆形边框

Question

我正试图在字段集及其图例周围设置边框，而不会在图例上显示此边框的底部。

这是默认行为：

fieldset {
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 25px;
}
legend {
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 5px 15px;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

我希望传说成为“字段集的一部分”，如下所示：

我尝试了许多技巧，与border-bottom和box-shadow一起玩没有成功 有没有人知道如何正确实现这一目标？

感谢。

Answer 1

如果您在图例中添加内部<span>，则可以使用一点css hackery来实现此效果。

fieldset {
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 25px;
  margin-top: 20px;
}
legend {
  border:  1px solid #ccc;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  padding: 0 18px;
  position:relative;
  top: -10px;
}
legend span {
  position:relative;
  top: 8px;
}

<fieldset>
  <legend><span>Legend</span></legend>
</fieldset>

如果你不能添加内部跨度，你可以获得类似的效果，但它并不完美。

fieldset {
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 25px;
  margin-top: 20px;
}
legend {
  border:  1px solid #ccc;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  padding: 8px 18px 0;
  position:relative;
  top: -14px;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

Answer 2

这是一个没有添加标记的解决方案。使用与图例和字段集具有相同背景颜色的伪元素来隐藏图例的底部。

这是一个样本。根据需要调整。

＆＃13;

＆＃13;

fieldset {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 25px;
  position: relative;
  margin-top: 30px;
}
legend {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 15px;
  position: absolute;
  top: -25px;
  left: 20px;
  background-color: #fff;
}
legend::after {
  content: '';
  background-color: #fff;
  height: 7px;
  right: -1px;
  left: -1px;
  bottom: -1px;
  border-radius: 0 0 5px 5px;
  position: absolute;
}

＆＃13;

<fieldset>
  <legend>Legend</legend>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 3

阅读所有答案后，我找到了一个令人满意的解决方案，没有任何转变，也没有额外的标记：

＆＃13;

＆＃13;

fieldset {
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 25px;
}
legend {
  position: relative;
  border:  1px solid #ccc;
  border-radius: 5px;
  padding: 5px 15px;
  line-height: 18px;
}
legend:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 13px;
  z-index: 1;
  border: 1px solid white;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

＆＃13;

<fieldset>
  <legend>Legend</legend>
</fieldset>

＆＃13;

＆＃13;

＆＃13;