最小交集方案需同时满足：使用.cur文件、显式fallback、指定热点坐标、通过http服务运行；缺一不可，否则在chrome/firefox中光标静默失效或本地file://协议下被安全策略拦截。
做不到真正“统一”，但能覆盖 Chrome、Firefox、Edge、Safari（macOS）的最小交集方案：必须用 .cur 文件 + 显式 fallback + 热点坐标 + HTTP 服务，缺一不可。
为什么 fallback 缺失会让光标彻底消失
Chrome 和 Firefox 不会把 cursor: url("hand.png") 当作“加载失败就回退到默认箭头”，而是直接跳过整条 CSS 规则——结果是光标看起来“没变”，控制台也不报错。这是静默失效，最难排查。
必须写成：cursor: url("hand.cur"), pointer; 或 cursor: url("hand.png") 16 16, auto;
- 逗号不能少，也不能用中文逗号或多余空格
- fallback 关键字只能是标准值：
default、pointer、auto、text、not-allowed等，none虽合法但可访问性差，慎用 - IE 和旧 Safari 会直接忽略不含 fallback 的声明，连 warning 都不给
为什么 .cur 比 .png 更可靠
.cur 是 Windows 原生光标格式，自带热点（hotspot）坐标，解析容错强；.png 在 Firefox 中极其脆弱，稍有偏差就渲染成灰块或空白。
关键差异：
-
.cur：用 RealWorld Cursor Editor 等工具生成，自动嵌入热点，Chrome/Firefox/Edge 全支持，Safari 14+ 支持同源.cur -
.png：必须 RGBA 格式、≤32×32px、导出时关闭调色板压缩和 ICC 配置文件；若要设热点，得显式写url("hand.png") 8 8，但 Safari 15.4 之前完全不认 x y 语法 -
.svg：Chrome 支持有限，Safari 和 iOS 完全不支持，别用
为什么本地双击打开 HTML 必定失败
用 file:// 协议打开页面时，Chrome/Edge/Firefox 会拦截所有 url() 加载，控制台报 Not allowed to load local resource——这不是你路径写错了，是浏览器安全策略强制阻止。
开发阶段必须起 HTTP 服务：
-
npx serve（轻量，推荐） python3 -m http.server 8000- VS Code 的 Live Server 插件
另外注意：url() 路径始终相对于 CSS 文件位置，不是 HTML 文件。比如 CSS 在 /css/style.css，图标在 /img/hand.cur，就得写 url("../img/hand.cur")，而不是 url("/img/hand.cur")。
移动端和 Safari 的现实限制
iOS Safari、Android Chrome、所有主流触摸浏览器都忽略 cursor 的 url() 值，包括 pointer、move 等关键字在真机上也大概率无效——这不是 bug，是规范允许 UA 忽略该属性。
务实做法：
- 用媒体查询隔离 hover 场景：
@media (hover: hover) { .btn:hover { cursor: url("hand.cur"), pointer; } } - 不要给
body或*直接设自定义光标：表单控件、链接、contenteditable区域会覆盖它，导致输入时光标异常 - 如果必须全局生效，需显式重置交互元素：
input, button, a, [contenteditable] { cursor: auto; }
真正卡住人的永远是 fallback 缺失 + 本地 file:// 调试 + Firefox 对 PNG 的隐性限制三者叠加。先确保逗号后跟了 pointer，再起服务跑，最后换 .cur ——基本就能过了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
