html实现边框缺一块的效果

如图，要实现这种效果最简单的方法就是fieldset标签+legend标签

<fieldset>
    <legend>姓名</legend>
    <div>
      内容
    </div>
  </fieldset>

fieldset 有几种特别的样式方案。

它的 display 值默认为 block，因此建立了一个块级格式化上下文。如果将 fieldset 的 display 值设置为行内级别，则会表现为 inline-block，否则会表现为 block。默认情况下fieldset会有 2px groove 的边界围绕着内容，还有一个默认的小的内边距，还有 min-inline-size: min-content (en-US) 。

如果其中有 legend 元素，会放在块级框起始处的边界上。legend的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。display 值会块级化（例如 display: inline 表现为 block）。

一个匿名的框会包围 fieldset 的内容，这个框继承了fieldset的一些属性。如果将 fieldset 的样式设置为 display: grid 或 display: inline-grid，那么这个匿名框也会是栅格上下文。如果将 fieldset的样式设置为 display: flex 或 display: inline-flex，则匿名框也会是弹性盒上下文。除上述情况之外，匿名框默认建立块级格式化上下文。

你可以以任意方式自行设置 fieldset 和 legend 的样式以配合你的页面设计。

相关资料: fieldset标签