如何复用样式表颜色实现动态边框式进度条效果？

下面提供两种无需硬编码颜色、仅通过动态修改百分比就能实现边框进度条的方案，完全复用CSS类中定义的颜色：

方案1：CSS变量 + 伪元素实现进度边框 #

这种方案通过伪元素模拟进度边框，颜色由类的CSS变量定义，仅需动态修改--progress变量即可控制进度，且不影响子元素宽度。

CSS 代码 #

/* 基础样式类，定义颜色变量 */
.progress-border-container {
  --progress-color: #2563eb; /* 进度边框色，可通过类复用 */
  --bg-color: #e5e7eb;      /* 背景边框色，可通过类复用 */
  --border-width: 4px;      /* 边框总厚度 */
  position: relative;
  padding: var(--border-width);
  background-color: var(--bg-color);
}

/* 伪元素实现进度边框 */
.progress-border-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%); /* 动态修改这个变量控制进度 */
  background-color: var(--progress-color);
  z-index: 1;
}

/* 内容容器，覆盖在进度层上 */
.progress-content {
  position: relative;
  z-index: 2;
  background-color: white; /* 内容区背景色，按需调整 */
  padding: 1rem;
}

HTML 使用示例 #

<!-- 进度30%，仅通过style修改--progress变量 -->
<div class="progress-border-container" style="--progress: 30%;">
  <div class="progress-content">内容区域</div>
</div>

方案2：background-clip + 线性渐变 + CSS变量 #

这种方案利用background-clip: border-box让渐变背景填充边框区域，颜色由类变量定义，仅动态修改渐变的百分比断点。

CSS 代码 #

.progress-border {
  --progress-color: #22c55e; /* 进度色 */
  --bg-color: #d1d5db;       /* 背景色 */
  --border-width: 3px;
  border: var(--border-width) solid transparent;
  background: 
    linear-gradient(var(--progress-color), var(--progress-color)) 0 0 / var(--progress, 0%) 100% no-repeat,
    linear-gradient(var(--bg-color), var(--bg-color)) 0 0 / 100% 100% no-repeat;
  background-clip: border-box, border-box;
  padding: 1rem;
}

HTML 使用示例 #

<!-- 进度60%，动态修改--progress变量 -->
<div class="progress-border" style="--progress: 60%;">内容区域</div>

说明 #

• 两种方案都无需在动态代码中硬编码颜色，所有颜色定义在CSS类的变量中，便于统一维护和复用网站样式。
• 方案1的伪元素方式更灵活，可实现不同方向（上/下/左/右）的进度边框，只需调整伪元素的top/left/width/height属性；方案2代码更简洁，适合水平/垂直方向的基础进度边框。

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