为组合字段集提供边框答案

【问题标题】：Give border to combined fieldset为组合字段集提供边框
【发布时间】：2022-01-05 00:33:45
【问题描述】：

我尝试使用 react 应用程序制作一个字段集，但似乎很困难，所以我设法使用一些 css 使它看起来像，现在我很好奇如何像这样为完整框添加边框

  <div class="fieldset">
    <div class="legend">Text</div>
    Text2
  </div>

自定义样式：

  .fieldset{
    width: 200px;
    height: 300px;
    border: 1px solid black;
    padding: 30px;
    margin: 30px;
    position: relative;
  }
  .legend{
    font-size: 45px;
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translate(-50%);
    background: #fff;
  }

【问题讨论】：

请向我们展示您的代码，因为我们只能猜测“完整框”是如何由元素组成的；
@AHaworth 在这里！

标签： css reactjs fieldset

【解决方案1】：

这样你就可以接近你的目标。希望它对你有用。

.fieldset{
            border: 1px solid black;
            padding: 30px;
            margin: 100px 30px 30px;
            position: relative;
            font-size: 45px;
            width: 200px;
            border-radius: 10px;

          }
          .legend{
              position: absolute;
              width: fit-content;
              top: -74px;
              left: 0;
              right: 0;
              margin: 0 auto;
              padding: 10px;
              border: 1px solid #000;
              border-bottom: 1px solid #fff;
              border-radius: 10px 10px 0 0;
        }

<div class="fieldset">
   <div class="legend">Title</div>
   Content
</div>

【讨论】：

感谢您的努力，但这不是我所期待的