React自定义fieldset边框文字区域透明无背景实现方案咨询

解决方案 #

有两种成熟的实现方案可以满足你「透明背景+边框不穿过文字」的需求：

方案1：改用原生fieldset+legend标签（推荐） #

HTML原生的<fieldset>（外框）和<legend>（边框上的文字）组合天生就支持边框自动在文字位置断开的效果，不需要额外hack，完美适配背景透明的需求，代码改动量极小。

修改后的代码：

JSX部分：

function ThankYou(){
  return(
    <div className="thankYouParent">
      {/* 把原来的div改成fieldset */}
      <fieldset className="thankYouBox">
        {/* 把边框文字改成legend标签 */}
        <legend className="borderText"> For visiting us </legend>
        <label className="thankYouText">Thank You</label>
      </fieldset>
    </div>
  )
}

ReactDOM.render(
  <ThankYou />,
  root
)

CSS调整部分：

/* 重置fieldset默认样式 */
.thankYouBox {
  display: flex;
  position: relative;
  text-align: center;
  border: 5px solid #ffffff;
  text-transform: uppercase;
  height: 40vh;
  width: 75vw;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* 调整legend位置和样式 */
.borderText {
  font-family: interstateRegular;
  color: white;
  font-size: 3vh;
  /* 删掉原来的background-color */
  padding-left: 1vw;
  padding-right: 1vw;
  /* 调整对齐到下边框 */
  margin: 0 auto;
  transform: translateY(calc(20vh - 50%));
}

这个方案不需要你自己计算文字宽度、也不需要额外写伪元素，浏览器原生处理边框断开逻辑，不管页面背景是纯色、渐变还是图片都能正常透出。

方案2：纯div自定义实现（适合需要高度自定义样式的场景） #

如果你一定要用div实现不引入fieldset标签，可以把底部边框拆分为左右两段，中间空出文字的位置：

1. 删掉.thankYouBox的全局border，单独设置上、左、右三个方向的边框
2. 用两个伪元素实现底部左右两段边框，中间留空对应文字的宽度
3. 文字放在中间留空的位置，不需要设置背景色

核心CSS示例：

.thankYouBox {
  display: flex;
  position: relative;
  text-align: center;
  /* 只设置上左右边框 */
  border: 5px solid #ffffff;
  border-bottom: none;
  text-transform: uppercase;
  height: 40vh;
  width: 75vw;
  justify-content: center;
}

/* 底部左右两段边框 */
.thankYouBox::before, .thankYouBox::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 5px;
  background: #fff;
}
.thankYouBox::before {
  left: 0;
  /* 左侧边框宽度 = 容器宽度的一半 减 文字宽度的一半 减 1vw的内边距 */
  width: calc(50% - 8ch - 1vw);
}
.thankYouBox::after {
  right: 0;
  width: calc(50% - 8ch - 1vw);
}

.borderText {
  font-family: interstateRegular;
  position: absolute;
  color: white;
  font-size: 3vh;
  /* 删掉背景色 */
  padding-left: 1vw;
  padding-right: 1vw;
  bottom: -1.5vh;
  margin-bottom: -3px;
}

注：这里的8ch是文字的大概宽度，你可以根据实际文字长度调整数值，或者用JS动态获取文字宽度计算更精准。

内容的提问来源于stack exchange，提问作者Bishonen_PL