缺少备用光标会导致整条cursor: url()声明被chrome和firefox直接忽略，而非回退为默认箭头；正确写法必须为cursor: url("path.png"), pointer;，且png需为rgba格式、≤32×32px，.cur最兼容。
缺少备用光标（fallback）导致声明被忽略
Chrome 和 Firefox 会直接忽略 cursor: url(...) 这类没有备选值的声明，不是显示默认箭头，而是彻底跳过——结果就是光标看起来“没变”。必须写成 cursor: url("path.png"), pointer; 这种带逗号和关键词的格式。漏掉 pointer、auto 或 default 中任意一个，整条规则就失效。
图片尺寸或格式不达标，尤其在 Firefox 中
Firefox 对自定义光标极其挑剔：PNG 必须是 RGBA 格式（不能是索引色），尺寸严格建议 ≤32×32px（64×64px 在部分版本勉强可接受，但 128×128 就大概率被截断或渲染为方块）。.cur 文件最稳妥，但需用专业工具生成（含热点坐标）。.png 虽方便，但导出时要确认 Alpha 通道完整、无调色板压缩。
-
url("cursor.png")→ 若 PNG 是 256×256 或带索引色，Firefox 显示为灰色方块 -
url("cursor.cur")→ 推荐优先使用，自带热点且兼容性好 -
url("cursor.svg")→ Safari 和 Chrome 支持有限，iOS Safari 完全不认
路径错误 + 本地 file:// 协议下加载被拦截
双击打开 index.html 时，浏览器走的是 file:// 协议，Chrome 和 Edge 会直接阻止 url() 加载本地图片——控制台报错 Not allowed to load local resource。这不是代码问题，是安全策略。
- 路径必须相对于 CSS 文件位置，不是 HTML 文件
- 解决办法只有起 HTTP 服务：
npx serve、python3 -m http.server或 VS Code Live Server 插件 - 开发阶段别依赖双击打开，否则永远卡在这一步
元素没有尺寸或未触发渲染层，光标无处生效
如果目标元素 width 和 height 都是 0，或者被 overflow: hidden 裁剪到视口外，即使 CSS 写对了，光标也不会出现。Firefox 尤其敏感，有时连空 <div></div> 都不认。
- 给元素加
min-width: 1px; min-height: 1px;测试是否生效 - 检查是否被父级
transform或opacity: 0影响了渲染层 - 移动端无需考虑——所有主流 iOS/Android 浏览器都忽略
cursor，写了也白写
url() 后跟了 pointer，再起服务跑，最后换 .cur 或压到 32×32 的 RGBA-PNG——基本就能过了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
