字段集和图例周围适当的圆形边框答案

【问题标题】：Proper rounded border around fieldset and legend字段集和图例周围适当的圆形边框
【发布时间】：2014-10-31 14:37:14
【问题描述】：

我正在尝试在字段集及其图例周围设置边框，而图例上没有此边框的底部。

这是默认行为：

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 没有成功。
有谁知道正确实现这一目标的方法？

谢谢。

【问题讨论】：

标签： css

【解决方案1】：

如果你在图例中添加一个内部<span>，你可以用一点csshackery来实现这个效果。

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>

【讨论】：

【解决方案2】：

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

这是一个示例。根据需要进行调整。

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;
}

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

【讨论】：

【解决方案3】：

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

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;
}

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

【讨论】：