如何创建带圆角、四段渐变边框及文本的div元素

你原来的方案用背景渐变模拟边框，没法适配border-radius——因为渐变生成的是直角线条，不会跟着圆角弧度弯曲。下面是可行的实现代码：

<div class="color-border-box"></div>

.color-border-box {
  width: 384px;
  height: 450px;
  margin: auto;
  text-align: center;
  border-radius: 16px;
  position: relative;
  background: #ffffff; /* 替换成你需要的容器背景色 */
}

/* 四条边分别用伪元素和内部元素实现，配合clip-path适配圆角 */
.color-border-box::before,
.color-border-box::after,
.color-border-box .border-segment {
  content: "";
  position: absolute;
  border-radius: inherit;
}

/* 上边：左#00A0DF 右#FFC600 */
.color-border-box::before {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #00A0DF 50%, #FFC600 50%);
  clip-path: inset(0 0 calc(100% - 3px) 0 round 16px);
}

/* 右边：上#FFC600 下#F5333F */
.color-border-box::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #FFC600 50%, #F5333F 50%);
  clip-path: inset(0 0 0 calc(100% - 3px) round 16px);
}

/* 下边：右#F5333F 左#6ABF4B */
.color-border-box .border-segment.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to left, #F5333F 50%, #6ABF4B 50%);
  clip-path: inset(calc(100% - 3px) 0 0 0 round 16px);
}

/* 左边：下#6ABF4B 上#00A0DF */
.color-border-box .border-segment.left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to top, #6ABF4B 50%, #00A0DF 50%);
  clip-path: inset(0 calc(100% - 3px) 0 0 round 16px);
}

关键思路： #

• 用四个独立元素（两个伪元素+两个内部元素）分别承载四条边的双色渐变
• 通过clip-path: inset()的round参数，让每条边的渐变线条精准贴合容器的圆角弧度
• 所有边框元素继承容器的border-radius，保证圆角尺寸一致

你原来的代码失效核心原因：背景渐变生成的是直角线段，无法自动适配border-radius的圆角，导致圆角区域没有边框覆盖，看起来圆角没生效。

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