自定义CSS进度条低数值时左侧出现不美观竖线的解决方法

当自定义CSS进度条的max设为1000、value设为5时，Chrome浏览器中进度条左侧会出现一条不美观的竖线；但value设为500时显示正常。

问题原因 #

这是Chrome对webkit内核进度条组件的渲染特性导致：当progress-value宽度极小时，其圆角无法完全覆盖progress-bar的左边框，从而露出竖线。

解决方案1：偏移进度值元素 #

通过给progress-value设置向左偏移，抵消progress-bar的左边框宽度，让进度值元素完全覆盖边框区域：

progress { appearance: none; }
progress::-webkit-progress-value { 
  border-radius: 10px; 
  background-color: #00122c;
  position: relative;
  left: -1px; /* 抵消progress-bar的1px左边框 */
}
progress::-webkit-progress-bar { 
  border: 1px solid #00122c; 
  border-radius: 10px; 
  background-color: white; 
}

解决方案2：调整边框层级 #

将边框从progress-bar移到外层progress元素上，避免内部进度值元素与边框的渲染冲突：

progress { 
  appearance: none;
  border: 1px solid #00122c;
  border-radius: 10px;
  overflow: hidden; /* 确保内部元素不超出圆角范围 */
}
progress::-webkit-progress-bar { 
  background-color: white;
  border-radius: 0; /* 外层已设置圆角，内部无需重复 */
}
progress::-webkit-progress-value { 
  border-radius: 10px; 
  background-color: #00122c; 
}

两种方案都能解决小值时的竖线问题，可根据实际需求选择。

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