如何为带标题缺口的fieldset添加渐变边框并保留圆角？

问题根源：border-image 与 border-radius 存在兼容性冲突，使用 border-image 时 border-radius 会被忽略，这是CSS规范中的既定行为。

要实现透明背景、圆角渐变边框、标题缺口的效果，我们可以改用「伪元素+渐变背景」的方式模拟渐变边框，同时保留 <fieldset> + <legend> 组合来实现标题缺口的特性，具体实现如下：

方案代码实现 #

HTML结构（保留原有结构逻辑） #

<fieldset class="contour-block">
  <legend class="block-title">Lorem Ipsum</legend>
  <!-- 区块内容容器 -->
  <div class="block-content">
    这里是区块内容，背景保持透明
  </div>
</fieldset>

CSS样式 #

.contour-block {
  position: relative;
  /* 保留透明边框，用于legend的缺口定位 */
  border: 4px solid transparent;
  border-radius: 30px;
  padding: 20px;
  background-color: transparent;
}

/* 伪元素实现渐变圆角边框 */
.contour-block::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  /* 渐变背景 */
  background: linear-gradient(to right, blue, red);
  border-radius: 30px;
  /* 挖空中间区域，实现透明背景 */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.block-title {
  padding: 0 20px;
  margin-left: 50px;
  /* 用页面背景色覆盖下方边框，形成缺口 */
  background-color: #fff; /* 替换为你的页面实际背景色 */
  font-size: 1.2rem;
}

.block-content {
  /* 内容样式按需调整 */
  color: #333;
  line-height: 1.5;
}

关键要点说明 #

• 利用 <fieldset> 原生特性：<legend> 会自动在边框区域形成缺口，给它设置与页面一致的背景色，就能覆盖下方的渐变边框，实现标题缺口效果。
• 伪元素模拟渐变边框：通过 mask 属性（含webkit前缀兼容）将伪元素中间区域挖空，既保留渐变边框，又保证容器背景透明，同时 border-radius 可正常生效。
• 透明边框的作用：维持 <legend> 的布局逻辑，避免伪元素边框干扰标题的缺口定位。

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