cursor: url() 必须用相对或绝对URL，禁用本地路径；需指定热区坐标（如12 12）且fallback为必需项（如pointer）；优先用.cur格式，PNG/SVG需显式声明热区；Safari不支持SVG光标，应降级为.cur或.png。
cursor: url() 路径必须是相对或绝对URL，不能是本地文件路径
直接拖拽本地图片到 cursor: url() 里是无效的，浏览器会静默忽略——这是最常被卡住的地方。开发时用 file:// 协议打开 HTML 文件，url("my-cursor.png") 会被当成相对于当前文件系统路径解析，但现代浏览器出于安全限制，会直接拒载（控制台报 Not allowed to load local resource）。
实操建议：
- 启动一个本地服务（比如
python3 -m http.server 8000），用http://localhost:8000访问页面 - 确保图片路径是相对于 HTML 文件位置的，例如 HTML 在
/src/index.html，图片在/src/assets/cursor.cur，就写cursor: url("assets/cursor.cur"); - 优先用
.cur格式（Windows 原生光标格式），它内置热区坐标，兼容性比 PNG 好；若用 PNG，必须加尺寸和热区，如url("hand.png") 4 4, auto
热区（hotspot）坐标不设或设错，会导致点击偏移
光标图片左上角默认是热区（即“点击点”），但多数设计稿里手型、箭头等图标的视觉中心不在左上角。不指定热区的话，用户会感觉“明明点在按钮上，却没触发”。
语法中逗号前的两个数字就是热区 X/Y 坐标，单位是像素，从左上角开始算：
立即学习“前端免费学习笔记（深入）”；
cursor: url("pointer.cur"), auto;
cursor: url("hand.png") 12 12, pointer;常见做法：
- 用图像编辑器打开光标图，确认实际交互点距左、上边缘的像素值
-
.cur文件本身含热区信息，所以单写url("x.cur")就够；PNG/SVG 必须显式声明，否则浏览器按0 0处理 - 热区超出图片尺寸不会报错，但行为不可预测，建议控制在宽高范围内
fallback 值不是可选，而是必需的
cursor: url(...), fallback 中的 fallback 不是“锦上添花”，而是强制要求。如果 url() 加载失败（404、跨域、格式不支持），浏览器会跳过整个声明，退回到父级或默认光标——你可能完全察觉不到失败。
正确写法必须带至少一个标准关键词作为兜底：
cursor: url("icon.svg") 8 8, pointer; /* ✅ */
cursor: url("bad-path.ico"), default; /* ✅ */
cursor: url("arrow.png"); /* ❌ 无效，整条声明被丢弃 */推荐 fallback 组合：
- 交互类：用
pointer、move、grab - 文本类：用
text、vertical-text - 通用保底：结尾加
auto或default
SVG 光标在 Safari 和旧版 Edge 中不支持
虽然 CSS 规范允许 SVG 作为 url() 参数，但 Safari 一直不支持（截至 Safari 17.6），加载 SVG 光标会静默回退到 fallback；旧版 Edge（EdgeHTML）同样不认。这不是 bug，是明确未实现的特性。
如果你需要全平台一致表现：
- 坚持用
.cur（Windows） +.png（其他）双格式，配合媒体查询或 JS 特性检测切换 - 避免在
<svg>内联代码里用<use>引用外部图标当光标——它本质还是 SVG URL，一样被 Safari 拒绝 - 测试时务必在真机 Safari 上验证，模拟器或 Chrome 的 “Toggle Device Toolbar” 不反映真实限制
热区定义、fallback 强制性和格式兼容性这三点，漏掉任一个都可能导致光标在部分设备上完全不可见或行为异常。尤其上线前别只看 Chrome 表现。
