围绕图例的厚字段集圆角边框

Posted 2021-05-07

我需要使连接到图例的字段集边框看起来是圆的。使用CSS做到这一点的最简单方法是什么？

fieldset {
	text-align: center;
	border: 20px solid;
	border-radius: 50px;

}

legend {
	width: 250px;
}

<form>
  <fieldset>
    <legend> <span>title</span></legend>
    <p>data goes here </p>
  </fieldset>
</form>

答案

您可以使用矩形阴影添加曲线

fieldset {
  text-align: center;
  border: 20px solid;
  border-radius: 50px;
}

legend {
  width: 250px;
  border-radius: 50px;
  box-shadow: 0 0 0 5px #fff;
}

<form>
  <fieldset>
    <legend> <span>title</span></legend>
    <p>data goes here </p>
  </fieldset>
</form>

另一答案

您可以删除图例标记并尝试使用此html代码。

<form>
  <fieldset>
   <span>title</span>
    <p>data goes here </p>
  </fieldset>
</form>

以上是关于围绕图例的厚字段集圆角边框的主要内容，如果未能解决你的问题，请参考以下文章

如何防止字段集的边框穿过表单标签包围的图例元素？

字段集和图例的自定义边框

带下划线的字段集图例

花哨的字段集图例

如何将图例定位在带边框的字段集中？ [复制]

android中的图例和字段集