本文详解如何在 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 组件的可靠范式。
