conic-gradient中用calc()动态计算from角度（如from calc(-90deg + var(--start)）可精准控制起始方向，避免transform旋转整容器导致指示器错位，且必须显式带deg单位以确保跨浏览器兼容。
conic-gradient 里用 calc() 计算偏移角度
直接在 conic-gradient 的色标位置用 calc() 做动态偏移，是最轻量、最可控的方式。比如进度从 0% 开始，但你想让环形“起始点”默认在 12 点方向（即顶部），就得先旋转 -90deg 补偿——这不是靠 transform，而是靠渐变起点偏移。
常见错误是把 transform: rotate(-90deg) 加在容器上，结果整个元素（包括文字、伪元素）都跟着转，指示器错位；或者误以为 conic-gradient 默认就从顶部开始，其实它默认从 3 点方向（0deg = 正右）。
background: conic-gradient(from calc(-90deg + var(--offset, 0deg)), #007bff 0%, #007bff var(--progress), #eee var(--progress) 100%)-
--offset控制整体起始角度，--progress控制填充终点，两者可独立控制 - 如果只用一个变量，推荐写成
from calc(-90deg + var(--start, 0deg))，避免和进度变量名冲突 - 注意单位必须一致：
var(--start)若传"30"就得补deg，建议 JS 设置时带单位：el.style.setProperty('--start', '30deg')
stroke-dashoffset 配合 SVG 时的变量绑定陷阱
当用 SVG + stroke-dasharray / stroke-dashoffset 实现环形进度条时，stroke-dashoffset 的偏移量本质是「描边起点平移距离」，不是角度。它的值单位是 px，不能直接用百分比或 deg。
容易踩的坑是：在 CSS 中硬写 stroke-dashoffset: calc(var(--percent) * 1px) —— 这毫无意义，因为 --percent 是 0–100 的数字，乘以 1px 得到的是 0–100px，而真实周长可能是 565.5px，偏移完全失准。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是 JS 先算出周长：
const circumference = 2 * Math.PI * r，再设style.setProperty('--circum', circumference) - CSS 中写：
stroke-dasharray: var(--circum) var(--circum); stroke-dashoffset: calc(var(--circum) - (var(--percent) / 100 * var(--circum))) - 更简洁写法：
stroke-dashoffset: calc(var(--circum) * (1 - var(--percent) / 100)) - 别忘了给
<circle>设transform="rotate(-90)"或 CSStransform: rotate(-90deg)，否则 0% 会出现在 3 点方向
clip-path 遮罩方案中 offset 的等效替代
用 clip-path: inset() 或 clip-path: circle() 裁剪圆形进度条时，没有直接的 “offset” 属性，但可以通过旋转遮罩层来模拟偏移效果——这其实是视觉等效，且更稳定。
关键在于：遮罩层本身不参与进度填充，只负责“挡住不该显示的部分”。所以偏移量最终落在遮罩层的 transform: rotate() 上，而不是进度色块上。
- 结构上分三层：外容器（relative）、底层色环（static）、遮罩层（absolute + rotate）
- 遮罩层内放一个半圆块：
background: conic-gradient(white 0%, white 180deg, transparent 0%) - 遮罩层旋转角度 =
calc(-90deg + var(--offset, 0deg) + var(--progress, 0deg))，其中--offset控制起始点，--progress控制填充长度 - 务必给遮罩层加
overflow: hidden，否则旋转后边缘会溢出 - 不要对底层色环设
transform，否则响应式缩放时会破坏比例
响应式下 offset 单位混乱导致偏移失效
在使用 aspect-ratio 或 width: 100%; height: auto 做响应式环形进度条时，--offset 如果用固定 deg 值（如 30deg）是安全的，但若混用 vw、rem 或无单位数值，就会出问题。
最隐蔽的问题是：Chrome DevTools 里看到 from 30deg 生效了，但 Safari 不认——因为 Safari 对 conic-gradient(from ...) 的单位解析更严格，无单位数字会被忽略，静默回退到 0deg。
- 所有角度值必须显式带单位：
var(--start)的值必须是"45deg"，不能是45 - 避免在 CSS 中做单位转换，比如
calc(var(--start) * 1deg)—— 这是非法语法，浏览器不报错但不执行 - JS 动态设置时统一用模板字符串：
el.style.setProperty('--start', `${angle}deg`) - 如果需要根据尺寸动态算角度（比如点击位置换算），必须在 JS 中完成，CSS 变量只接收最终带单位的字符串
真正难的不是怎么写偏移，而是怎么让偏移在不同尺寸、不同浏览器、不同更新频率下始终指向同一逻辑位置。多数卡顿和错位，根源都在单位混用或变量未绑定到具体实例。
