cursor: url() 必须严格满足三要素：url(路径) x y, fallback；路径相对css文件，x y为必填热点坐标，fallback为必需回退关键字；.cur最兼容，png需带alpha且≤32×32，ico需含32×32帧。
直接写 cursor: url(./icon.png) 基本上不会生效——浏览器会静默忽略，连控制台错误都不报。真正能用的写法必须带热点坐标和 fallback 关键字，且格式容错率极低。
cursor: url() 的语法结构必须严格满足三要素
浏览器只接受形如 cursor: url(path) x y, fallback; 的完整声明，缺一不可：
-
url()内路径必须相对于当前 CSS 文件位置（不是 HTML 或 JS 所在路径） -
x y是必填的热点坐标，单位像素，从左上角（0,0）起算；即使为0 0也不能省略 - 逗号后必须跟一个合法的 fallback 关键字，例如
pointer、default、auto；只写url(...)不加 fallback，Safari 和旧版 Edge 直接跳过整条规则
ico 与 png 的实际兼容性差异
虽然文档说支持 PNG，但真实场景中：
-
.cur是最稳妥的选择，Windows/macOS/Chrome/Firefox 全系原生支持，推荐尺寸为32×32像素 -
.ico可用，但需确保包含 32×32 尺寸帧；部分构建工具（如 Vue CLI）默认不处理.ico，需手动配置url-loader或改用asset模式 -
.png要求带 alpha 通道，无透明背景的 PNG 在 Chrome 上会显示黑底；尺寸超过32×32在 Windows Chrome 中可能被裁剪 -
.jpg、无 alpha 的 PNG、SVG（即使带viewBox）均不被任何主流浏览器支持作为光标
多回退写法与常见失效原因
可用逗号链实现降级，但顺序和语法稍有偏差就全链失效：
- 正确示例：
cursor: url(./c.cur) 16 16, url(./f.png) 4 4, pointer; - 错误点 1：漏掉任一
x y，整条声明无效（Firefox 完全不加载，Chrome 降级但不提示） - 错误点 2：路径 404 时浏览器不报错，只静默走 fallback；建议先用
curl -I或 Network 面板确认资源可访问 - 错误点 3：Vue/Svelte 等框架中，若用
@/assets/xxx.cur这类别名路径，CSS 里无法解析——必须写相对路径，或改用data:image/x-icon;base64,...（注意 Base64 过长影响维护性，且 IE11 不支持）
最容易被忽略的是热点坐标的物理意义：它决定鼠标点击/悬停时“触发点”落在图片的哪个像素上。手型光标若设成 32 32，实际点击位置会偏移到右下角，交互感明显错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
