必须用cursor: url("x.cur"), pointer;格式，支持.cur和带alpha的.png，尺寸≤128×128px，路径相对CSS文件，且需指定热点坐标和回退关键字。
如何用 cursor 属性设置自定义光标图片
直接用 cursor: url(...) 可以加载本地或远程的光标文件，但浏览器只支持特定格式和尺寸，且必须配一个 fallback 关键字。常见错误是只写 url() 而没加后备值，导致自定义失效后光标变空白或回退到系统默认（不一定是 default）。
实操建议：
- 图片推荐使用
.cur格式（Windows 原生光标），或带透明通道的.png；.gif不支持 - 尺寸建议 ≤ 128×128px，超过部分在某些浏览器（如 Safari）会被忽略
- 必须声明 fallback，例如：
cursor: url("hand.cur"), pointer;，逗号后不能少 - 路径需相对 CSS 文件位置，不是 HTML 页面；用绝对路径或 CDN 链接更稳妥
cursor 的常用关键字值有哪些，什么时候该用哪个
关键字值决定语义和行为，不只是外观。比如 pointer 和 hand 看起来一样，但后者在部分旧浏览器中不被识别，而 grab/grabbing 是拖拽场景专用，有明确交互暗示。
关键区别点：
立即学习“前端免费学习笔记（深入）”；
-
default：常规箭头，别在按钮上硬套它来“重置”，会丢失可点击提示 -
pointer：表示可点击，几乎所有交互元素都该用它，不是只有<a> -
text：用于可编辑/可选中文本区域，触发系统文本光标（I-beam），不是装饰用 -
not-allowedvsno-drop：前者表功能禁用（如灰掉的按钮），后者专用于 drag & drop 拒绝投放时
为什么自定义光标在 Firefox 或 Safari 中不显示
根本原因常是跨域或 MIME 类型问题。Firefox 要求 .cur 文件响应头为 Content-Type: image/x-win-bitmap，否则拒绝加载；Safari 对 url() 路径是否同源更敏感，且不支持 data URL 形式的光标（Chrome 支持）。
排查步骤：
- 打开开发者工具 → Network，过滤光标文件，看是否 404 或返回 403
- 检查响应头里有没有
Content-Type，尤其用 Nginx/Apache 托管时需手动配置 MIME - 避免用
file://协议本地测试，启动一个本地 server（如npx serve） - 不要依赖
cursor: url("a.png"), url("b.cur"), auto;这种多备选——浏览器只取第一个有效url()，其余忽略
性能与可访问性要注意什么
自定义光标本身开销小，但若大量元素高频切换（如表格每行 hover 都换 cursor），可能触发重绘；更大的问题是可访问性——屏幕阅读器不感知 cursor，而键盘用户根本看不到它。
所以：
- 别用光标样式替代状态提示，比如禁用态必须配合
aria-disabled="true"和视觉灰度 - 动画光标（如旋转的 loading 图）不推荐，既无标准支持，也干扰专注力
- 深色模式下自定义光标若无透明背景，可能在浅底色上糊成一团，务必检查 alpha 通道
url() 路径、fallback、MIME、可访问性这四点漏掉任一，就容易卡在“明明写了却不生效”。 
