CSS 中 url() 不支持 CSS 变量插值，SCSS 需用 unquote() 去引号；动态换光标须用 JS 设置 style.cursor 或切换 class；移动端不支持 url()，fallback 关键字必不可少。
url() 里不能直接拼接 CSS 自定义属性
自定义属性（--cursor-path）的值在运行时才解析，而 url() 是 CSS 声明的一部分，不支持表达式或变量插值。写成 cursor: url(var(--cursor-path)), pointer; 看似合理，但所有主流浏览器都会静默忽略整条 cursor 声明——不是路径错，是语法根本不被接受。
SCSS 编译期拼接必须用 unquote() 解包
如果你用 SCSS 预处理，str-insert() 或字符串拼接只能生成带引号的字符串字面量，而 url() 内部路径不能带外层引号。漏掉 unquote() 就会产出非法 CSS：
/* ❌ 错误：编译后变成 url("assets/hand.cur") → 浏览器报错 */
$base: "assets/";
$file: "hand.cur";
cursor: url(str-insert($base, $file, str-length($base) + 1)), pointer;
<p>/<em> ✅ 正确：unquote() 去掉外层引号，生成 url(assets/hand.cur) </em>/
cursor: url(unquote(str-insert($base, $file, str-length($base) + 1))), pointer;-
str-insert()的$index从 1 开始，传0或负数会静默失败，返回原字符串 - 拼
.cur路径比.png更稳妥，尤其在 Windows 和旧版 Firefox 下 - 路径建议用根相对路径（如
/assets/cursor-move.cur），避免构建工具重写或../回退失效
运行时动态换光标只能靠 JS 注入 style
真要根据状态切换不同光标（比如拖拽中切 move、缩放中切 zoom-in），CSS 变量走不通，得用 JS 直接改 style.cursor 或切换 class：
// ✅ 安全：JS 设置 cursor 关键字（无兼容风险）
element.style.cursor = 'move';
<p>// ✅ 或切换预设 class（推荐，便于复用 fallback）
element.classList.add('cursor-move');
// 对应 CSS：
.cursor-move { cursor: url('/assets/move.cur'), move; }- 不要试图用
element.style.cursor = `url(${path}), move`拼接，路径跨域、格式错误或尺寸超限都会让整条声明失效 - 移动端完全不支持
url()，Safari 仅接受同源.cur，所以 fallback 关键字（如move）不是可选项，是必选项 - 每次 JS 修改都触发重排，高频操作（如拖拽）建议用 class 切换而非内联 style
验证是否生效的关键检查点
光标不显示，90% 不是代码写错，而是卡在某个隐性环节：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements → 找到对应元素 → 看 Styles 面板里
cursor是否被划掉（invalid）或灰色（未生效） - 点开
url(...)后的链接，确认资源返回 200 且 Content-Type 是image/x-icon或image/png - 右键图片 → “在新标签页打开图像”，看是否能正常渲染；若报错或空白，说明图片本身损坏或尺寸超标（Firefox 限制 ≤128×128px，Chrome 实测 ≥256×256px 会静默丢弃）
- 检查热点坐标：如果用了
url(icon.cur, 8 8)，但 .cur 文件里自带热点在 (16,16)，叠加后实际偏移就错了
最常被忽略的是 fallback 链的完整性——哪怕路径 100% 正确，缺了逗号后的关键字，整条声明在 Safari 和部分 Electron 应用里就等于没写。
