如何为CSS半圆边框设置渐变颜色？

可以实现，直接使用border属性无法给部分边框单独设置渐变（border-image会应用到所有边框，无法精准控制局部），但可以通过背景渐变模拟边框的方式来实现，以下是具体改造方案：

原实现回顾 #

先看你原本的半圆进度条代码：

CSS 代码 #

.progress-semi-circle{
  position: relative;
  display:inline-block;
  padding: 20px;
  text-align: center;
}
.barOverflow{ /* 包裹旋转的.bar */
  position: relative;
  width: 180px; height: 90px; /* 只显示半圆的容器 */
  margin-bottom: -14px; /* 让数字上移 */
  overflow: hidden;
}
.bar-semi-circle{
  position: absolute;
  top: 0; left: 0;
  width: 180px; height: 180px; /* 完整圆形 */
  border-radius: 50%;
  box-sizing: border-box;
  border: 25px solid #262925;     /* 左上半部分灰色边框 */
  border-bottom-color: #0bf;  /* 右下半部分蓝色边框 */
  border-right-color: #0bf;
}

HTML 代码 #

<div class="progress-semi-circle">
  <div class="barOverflow">
    <div class="bar-semi-circle"></div>
  </div>
  <span>64</span>%
</div>

改造方案：渐变边框实现 #

我们通过**内边距（padding）+ 背景渐变 + 背景裁剪（background-clip）**来模拟边框效果，替换原有的border属性：

方案1：左上边框渐变，右下边框保留蓝色 #

如果需要把原灰色的左上边框换成渐变，右下边框仍用蓝色，修改.bar-semi-circle的CSS：

.bar-semi-circle{
  position: absolute;
  top: 0; left: 0;
  width: 180px; height: 180px; /* 完整圆形 */
  border-radius: 50%;
  box-sizing: border-box;
  /* 去掉原有border，用padding模拟边框宽度 */
  padding: 25px;
  /* 背景层：右下蓝色半圆 + 左上渐变背景 */
  background: 
    conic-gradient(#0bf 0deg 180deg, transparent 180deg 360deg),
    linear-gradient(to bottom right, #262925, #666, #262925); /* 自定义渐变 */
  /* 分别指定背景裁剪范围 */
  background-clip: content-box, padding-box;
}

方案2：整个边框使用渐变 #

如果想要整个半圆边框都是渐变效果（比如从深灰到蓝色的过渡），可以用锥形渐变（conic-gradient）实现：

.bar-semi-circle{
  position: absolute;
  top: 0; left: 0;
  width: 180px; height: 180px; /* 完整圆形 */
  border-radius: 50%;
  box-sizing: border-box;
  padding: 25px; /* 模拟边框宽度 */
  /* 锥形渐变覆盖整个圆形边框 */
  background: conic-gradient(#262925 0deg, #0bf 180deg, #262925 360deg);
  background-clip: padding-box;
}

原理说明 #

• padding:25px：预留出原来边框的宽度，作为渐变"边框"的显示区域
• background-clip: padding-box：让渐变只填充padding区域，模拟边框的视觉效果
• conic-gradient/linear-gradient：通过渐变实现不同的颜色过渡效果，配合圆形裁剪（border-radius:50%）形成弧形渐变边框

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