现代项目中真正稳定兼容的cursor关键字仅有12个w3c标准值：default、pointer、text、wait、help、move、not-allowed、no-drop、crosshair、vertical-text、alias、copy；其中前6个在ie9+及所有主流浏览器中表现一致，grab/grabbing、context-menu、none、hand等应避免使用。
cursor 常用关键字值哪些能放心用
现代项目里真正稳定、无需担心兼容性的只有 12 个 W3C 标准值：default、pointer、text、wait、help、move、not-allowed、no-drop、crosshair、vertical-text、alias、copy。其中前 6 个在 IE9+、Chrome、Firefox、Safari、Edge 全系都表现一致。
别碰 grab/grabbing——Safari 15.4 之前静默回退为 default，安卓 WebView 更是大概率失效；context-menu 在 Firefox 和 Chrome 支持，但 IE/Edge 完全不识别；none 虽然有效，但会破坏可访问性（屏幕阅读器可能跳过该区域），慎用。
老代码里还常见 hand，它只在 IE5–IE7 里起作用，现代浏览器已废弃，写上反而显得冗余。
url() 自定义光标必须带 fallback 关键词
cursor: url("icon.cur"); 这种写法在 Safari 和旧版 Edge 里直接被忽略，整条声明作废——因为缺少 fallback。正确写法必须是 cursor: url("icon.cur"), pointer; 或 cursor: url("icon.png") 4 12, move;。
fallback 不只是“备用”，它是浏览器解析 url() 的前提条件：没有它，CSS 引擎连图片路径都不去加载。
-
.cur文件自带热区（hotspot），Windows 下推荐，不用手动指定坐标 -
.png必须显式写热区，如4 12表示从左上角向右 4px、向下 12px 的点为点击中心 - 热区坐标缺失时，浏览器默认取 (0, 0)，容易导致点击位置和视觉光标错位
本地开发时 cursor url() 不显示的三大原因
最常遇到的是：路径没错、文件存在、控制台无报错，但光标始终是 fallback 值。打开 Elements 面板看 computed 样式，如果 cursor 显示为 pointer 而不是 url(...)，说明加载失败。
根本原因有三个：
- 浏览器拒绝
file://协议下的url()加载（Chrome 严格拦截，Firefox 也逐步收紧） - CSS 中的路径是相对于 HTML 文件，而不是 CSS 文件——比如 CSS 在
/css/style.css，却写了url("img/cursor.cur")，实际会去找/img/cursor.cur - 图片尺寸超标：Chrome 对 > 128×128px 的图像直接静默降级；Windows 系统下更严，32×32px 是最稳妥尺寸
解决办法只有一个：用 http-server、live-server 或 VS Code 的 Live Server 插件起本地服务，确保地址是 http://localhost:xxxx。
.cur 与 .png 作为自定义光标的实际差异
选格式不是看“哪个更现代”，而是看目标平台和可控性：
-
.cur：Windows 原生支持，含热区、支持动画（.ani），IE 仅认这个；但制作麻烦，需专用工具导出，不能用普通绘图软件直接保存 -
.png：前端更易生成，支持透明通道，但热区必须手写，且 Chrome 99+ 才开始有限支持；Firefox 对 PNG 光标尺寸更宽容，但 Safari 仍不稳定 - SVG 几乎不要考虑：多数浏览器不支持，Chrome 99+ 要求 CORS 允许 + 无外部引用 + 无 JS，实际项目中基本不可靠
如果你只面向桌面端 Windows 用户，优先用 .cur；如果要兼顾 macOS/Linux，且能接受热区微调，用 32×32px 的 .png + 显式坐标更可控。尺寸、热区、fallback，三者缺一不可，少一个就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
