根本原因不是“浏览器不支持”，而是 cursor: url() 声明被直接忽略——因缺失 fallback 关键字、PNG/SVG 格式或尺寸越界、file:// 协议拦截三者叠加导致失效。
根本原因不是“浏览器不支持”，而是 cursor: url() 声明被直接忽略——因为缺少 fallback 关键字、图片格式/尺寸越界，或路径在本地协议下被拦截。这三者叠加，导致你改了十遍 CSS 也看不到效果。
fallback 缺失会让整条 cursor 声明失效
Chrome 和 Firefox 不是“回退到默认箭头”，而是彻底跳过这条规则。写成 cursor: url("hand.png"); 就等于没写。必须带逗号 + 关键字：
-
cursor: url("hand.cur"), pointer;✅ 最稳妥 -
cursor: url("arrow.png"), auto;✅ PNG 也可，但需满足尺寸和格式 -
cursor: url("icon.svg"), default;❌ Safari 和 iOS 完全不认 SVG 光标
fallback 不只是容错，它是声明生效的强制语法组成部分。
PNG 图片必须是 RGBA 格式且 ≤32×32px
Firefox 对 PNG 光标极其敏感：索引色 PNG、带调色板压缩、Alpha 通道不完整，都会渲染成灰色方块；超过 32×32px（哪怕 64×64），部分版本会截断或偏移热点。
立即学习“前端免费学习笔记（深入）”；
- 用 Photoshop 或在线工具导出时，选 “PNG-24 + 透明度”，关掉“索引颜色”
- 用
file cursor.png命令确认输出含RGBA字样（Linux/macOS） - 别信“128×128 在 Chrome 可用”——跨浏览器一致性要求下，32×32 是安全上限
file:// 协议下 url() 加载被浏览器主动拦截
双击打开 index.html 时，Chrome/Edge 会报 Not allowed to load local resource。这不是路径写错，是安全策略强制阻止。
- 路径本身必须相对于 CSS 文件位置，不是 HTML 文件 —— 但即使路径对，
file://下照样失败 - 开发阶段必须起 HTTP 服务：
npx serve、python3 -m http.server或 VS Code Live Server 插件 - 检查 Network 面板里光标图片请求是否返回 200；若显示
failed或空白，八成是file://拦截
.cur 文件最可靠，但需注意生成方式
.cur 天然支持热点（hotspot），无需手动指定 x/y 偏移，兼容性远超 PNG。但它不能用普通图像工具另存为，必须用专业工具生成：
- 推荐使用 RealWorld Cursor Editor 或在线转换器（搜 “png to cur online”）
- 导入 PNG 后，务必手动设置热点坐标（通常为左上角 0,0 或中心点 16,16）
- 不要用 Windows 自带的“另存为 .cur”功能——它生成的是无热点的无效文件
真正卡住人的地方，从来不是语法拼错，而是 fallback 缺失 + file:// 调试惯性 + Firefox 对 PNG 的隐性限制三者同时存在。先加 , pointer，再起服务跑，最后换 .cur —— 这三步走完，95% 的问题就消失了。
