本文详解如何在 css conic-gradient 实现的环形进度条中，科学插入两段等宽白色间隙——分别位于主色结束处与辅色结束前，避免因角度计算错误导致渲染失效。
本文详解如何在 css conic-gradient 实现的环形进度条中，科学插入两段等宽白色间隙——分别位于主色结束处与辅色结束前，避免因角度计算错误导致渲染失效。
在使用 conic-gradient 构建环形进度条时，若需在颜色过渡间加入视觉“呼吸感”，常会尝试插入白色间隔（gap）。但直接按百分比线性叠加偏移（如 +5% 和 -5%）极易引发角度范围重叠、反向或越界，最终导致整个渐变不可见——这正是原始代码失效的根本原因：conic-gradient 的色标必须严格满足 非递减、连续、覆盖 0%–100% 全区间，任何断点错位或负值/超限计算都会使浏览器放弃渲染。
正确解法是将间隙均分并精确锚定各色块边界。以 5% 总间隙为例，应拆为前后各 2.5%（即 –halfgap），再以此为偏移量重构五段色标：
- white 0 var(–halfgap)：起始至第一段白；
- var(–primary) var(–halfgap) calc(var(–pc) – var(–halfgap))：主色从第一段白后开始，到距进度终点前 –halfgap 处结束；
- white calc(var(–pc) – var(–halfgap)) calc(var(–pc) + var(–halfgap))：围绕进度点居中展开的白色间隙；
- var(–secondary) calc(var(–pc) + var(–halfgap)) calc(100% – var(–halfgap))：辅色紧接白隙之后，终止于距圆周末端 –halfgap 处；
- white calc(100% – var(–halfgap)) 100%：收尾白隙，完整闭合。
以下是可直接运行的优化代码（含注释）：
[role="progressbar"] { --percentage: var(--value); --primary: #00B4F4; --secondary: #00D0FF; --size: 200px; width: var(--size); aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; } [role="progressbar"]::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mask-mode: alpha; -webkit-mask: radial-gradient(#0000 55%, #000 0); -webkit-mask-mode: alpha; /* 关键：预计算提升可读性与复用性 */ --pc: calc(var(--percentage) * 1%); --gap: 5%; --halfgap: calc(var(--gap) / 2); /* 五段式 conic-gradient：白→主→白→辅→白，无缝衔接 */ background: conic-gradient( white 0 var(--halfgap), var(--primary) var(--halfgap) calc(var(--pc) - var(--halfgap)), white calc(var(--pc) - var(--halfgap)) calc(var(--pc) + var(--halfgap)), var(--secondary) calc(var(--pc) + var(--halfgap)) calc(100% - var(--halfgap)), white calc(100% - var(--halfgap)) 100% ); } [role="progressbar"]::after { counter-reset: percentage var(--value); content: counter(percentage) '%'; font-family: Helvetica, Arial, sans-serif; font-size: calc(var(--size) / 5); color: var(--secondary); font-weight: bold; }<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--value: 60" ></div>✅ 关键注意事项：
- –gap 值不宜超过 –percentage 或 100% – –percentage 的 50%，否则白隙将吞噬有效色块；建议最大设为 8%；
- radial-gradient 掩码中的 55% 决定了圆环粗细，如需更细环形，可调小该值（如 45%）；
- 所有计算均使用 calc() 保证 CSS 变量动态响应，无需 JavaScript 干预；
- 若需支持旧版 safari，保留 -webkit-mask 同时补充标准 mask 属性（现代浏览器已广泛支持）。
通过结构化变量与分段锚点设计，该方案既保障了视觉间隙的精确性，又维持了 conic-gradient 的数学严谨性，是构建高定制化环形 ui 组件的可靠范式。