用background-image线性渐变可实现纯css百分比填充：设底色background-color，再用linear-gradient(to right,#4caf50 0%,#4caf50 60%,transparent 60%)配合background-size:100% 100%和no-repeat达成精准填充效果。
用 background-image 线性渐变实现纯 CSS 百分比填充
直接靠 background-color 无法动态控制“填充满多少”，但用 background-image: linear-gradient() 可以。原理是：让渐变色从实色过渡到透明（或同背景色），再通过 background-size 控制实色区域宽度。
常见错误是写成 background-color: #4caf50 + width: 60% —— 这只能缩放整个盒子，不是“内部填充效果”，且会破坏盒模型布局流。
- 必须设容器
background-color为底色（如浅灰），再叠一层渐变作为“进度” - 渐变方向设为
to right，起点实色、终点透明：linear-gradient(to right, #4caf50 0%, #4caf50 60%, transparent 60%) - 关键：加
background-size: 100% 100%并设background-repeat: no-repeat，否则渐变默认平铺
div.progress {
height: 8px;
background-color: #e0e0e0;
background-image: linear-gradient(to right, #4caf50 0%, #4caf50 60%, transparent 60%);
background-size: 100% 100%;
background-repeat: no-repeat;
}
用 clip-path 裁剪出动态填充区域
比起渐变，clip-path 更精准——它不依赖颜色叠加，而是物理裁剪内容区域。适合需要高对比、多色进度条或动画平滑的场景。
容易踩的坑：IE 完全不支持；Safari 旧版本需加 -webkit-clip-path；百分比值必须用 calc() 或 JS 注入，不能直接写变量。
- 容器固定宽高，
background-color设为进度色 - 用
inset(0 0 0 X%)从右往左“挖掉”未完成部分，X = 100 - 百分比 - 例如 75% 进度：写
clip-path: inset(0 25% 0 0) - 若要响应式，建议用 JS 动态设置
style.clipPath，避免 CSS 变量兼容问题
为什么不用 width + 子元素？
有人习惯套一层 <span class="fill"></span>，然后设 width: 60%。这确实能用，但引入了额外 DOM 节点和样式依赖，且在 Flex/Grid 布局中易受父容器 min-width 或 overflow 干扰。
更隐蔽的问题是：当进度条被缩放（transform: scale(0.9)）或字体缩放时，子元素的 width 百分比计算基准可能偏移，导致填充错位。
- 纯 CSS 方案（渐变/clip-path）无 DOM 侵入，样式隔离强
- 动画性能更好：
background-size和clip-path都可硬件加速，而width触发重排 - 如果必须用子元素，至少设
flex-shrink: 0防止被压缩
动画卡顿？检查 will-change 和合成层
进度条动画（比如从 0% → 100%）在低端设备上容易掉帧，根本原因是浏览器把 background-position 或 clip-path 当作非合成属性处理。
不要对 width 做动画——它强制 Layout；也不要对 background-image 本身做动画（无效）。正确做法是只动 background-size 或 clip-path，并提前升层：
- 给进度条加
will-change: background-size（仅动画期间） - 或更稳妥：加
transform: translateZ(0)强制创建合成层 - Chrome DevTools → Rendering → “Paint flashing” 可验证是否真正在合成层绘制
真正难调的是 clip-path 在 Safari 上的动画抖动——此时退回用渐变 + background-position 滚动模拟，反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
