如何在Flutter中创建25%/50%/75%/100%进度式自定义边框？

这里有两种实用的CSS方案来实现你要的不同比例自定义边框效果：

方案1：单侧边比例边框（最常用场景） #

适合实现底部/顶部/侧边的部分边框，比如标题下方的短横线效果：

<div class="box border-25">25% 底部边框</div>
<div class="box border-50">50% 底部边框</div>
<div class="box border-75">75% 底部边框</div>
<div class="box border-100">100% 底部边框</div>

.box {
  width: 220px;
  padding: 1.2rem;
  margin: 1.5rem 0;
  position: relative;
  background-color: #f0f0f0;
}

/* 统一伪元素基础样式 */
.box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #1976d2;
}

/* 不同比例的宽度控制 */
.border-25::after { width: 25%; }
.border-50::after { width: 50%; }
.border-75::after { width: 75%; }
.border-100::after { width: 100%; }

如果需要让边框居中显示，只需要给伪元素加两行样式：

.box::after {
  left: 50%;
  transform: translateX(-50%);
}

方案2：四边分段比例边框 #

如果需要实现四边各显示对应比例的边框（比如四个角各有一段短边框），可以用CSS线性渐变来实现：

<div class="border-set border-25">25% 四边分段边框</div>
<div class="border-set border-50">50% 四边分段边框</div>
<div class="border-set border-75">75% 四边分段边框</div>
<div class="border-set border-100">100% 四边完整边框</div>

.border-set {
  width: 220px;
  height: 160px;
  margin: 1.5rem 0;
  padding: 1.2rem;
  background-repeat: no-repeat;
  background-color: #f0f0f0;
}

/* 25%比例：四边仅角落显示小段 */
.border-25 {
  background-image: 
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2);
  background-position: 
    0 0, 100% 0, 0 100%, 100% 100%;
  background-size: 25% 3px, 25% 3px, 3px 25%, 3px 25%;
}

/* 50%比例：四边显示一半长度 */
.border-50 {
  background-image: 
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2);
  background-position: 
    0 0, 100% 0, 0 100%, 100% 100%;
  background-size: 50% 3px, 50% 3px, 3px 50%, 3px 50%;
}

/* 75%比例：四边显示四分之三长度 */
.border-75 {
  background-image: 
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2),
    linear-gradient(#1976d2, #1976d2);
  background-position: 
    0 0, 100% 0, 0 100%, 100% 100%;
  background-size: 75% 3px, 75% 3px, 3px 75%, 3px 75%;
}

/* 100%比例：完整四边边框 */
.border-100 {
  border: 3px solid #1976d2;
}

两种方案都可以根据需求调整颜色、边框厚度、容器尺寸等参数，适配不同场景。

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