如何用CSS为圆形（椭圆）创建渐变圆形边框？

问题根源 #

• 使用 border-image 配合 conic-gradient 无法实现圆形/椭圆渐变边框，是因为 border-image 会将渐变按矩形区域切割拉伸，无法自然贴合圆角曲线，最终角部呈现棱角状。
• 伪元素方案失效，是因为目标椭圆需要置于容器上方，伪元素的层级或定位逻辑难以匹配该布局需求。

适配椭圆的渐变边框实现 #

针对你需要的宽188px、高581px的椭圆，采用容器内边距模拟边框+渐变背景+内部纯色椭圆遮罩的方案，可完美贴合椭圆曲线：

<div class="ellipse-container">
  <div class="ellipse-inner"></div>
</div>

.ellipse-container {
  /* 容器尺寸 = 目标椭圆尺寸 + 边框宽度×2 */
  width: 194px;
  height: 587px;
  /* 3px为边框宽度，对应你之前伪元素的偏移量 */
  padding: 3px;
  /* 锥形渐变，可按需调整颜色、起始角度 */
  background: conic-gradient(from 50deg, #FDBE1C, #1b1b1ba1);
  border-radius: 50%;
  transform: rotate(50deg);
  z-index: -1;
}

.ellipse-inner {
  /* 内部尺寸完全匹配目标椭圆 */
  width: 188px;
  height: 581px;
  background: #1B1B1B;
  border-radius: 50%;
}

方案逻辑 #

1. 外层容器通过 padding 预留边框空间，背景设置锥形渐变后，用 border-radius: 50% 变成椭圆容器；
2. 内层纯色椭圆刚好填满容器内边距区域，相当于遮掉渐变背景的中间部分，只保留外层的渐变边框；
3. 该方案完全贴合椭圆曲线，无角部棱角问题，且层级控制灵活，可通过调整 z-index 满足椭圆置于容器上方的需求。

正圆渐变边框的优化方案 #

如果是正圆场景，你之前的容器+内部元素思路是可行的，调整渐变参数即可实现完整环绕的渐变边框：

<div class="circle-container">
  <div class="circle"></div>
</div>

.circle-container {
  width: 220px;
  height: 220px;
  padding: 10px;
  /* 完整环绕的锥形渐变示例 */
  background: conic-gradient(#FDBE1C, #1b1b1b, #FDBE1C);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 100%;
  height: 100%;
  background: #1B1B1B;
  border-radius: 50%;
}

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