cursor 属性必须搭配 fallback 关键字（如 pointer）使用，否则 Safari 等浏览器静默忽略；.cur 格式因内嵌热点坐标、全兼容、无需偏移声明，仍是桌面端最稳妥选择。
cursor 属性能用，但直接写 url("icon.png") 很可能在 Safari 或部分安卓 WebView 里完全不生效——不是“变模糊”，而是静默回退成系统默认箭头，连报错都没有。
必须带 fallback 关键字，且逗号后不能少
浏览器只认 url() + 关键字的组合格式，漏掉关键字就等于废掉整条声明：
✅ 正确：cursor: url("hand.cur"), pointer;
❌ 错误：cursor: url("hand.cur");（Safari 直接忽略）
❌ 错误：cursor: url("hand.cur"), !important;（!important 不是合法 fallback）
fallback 关键字得是标准值，比如 pointer、auto、default、move，不能拼错、不能大小写混用（Pointer 无效）。
.cur 格式仍是桌面端最稳的选择
虽然 PNG/SVG 看起来更灵活，但实际项目中 .cur 是唯一自带热点坐标、全浏览器兼容、无需额外声明就能精准点击的格式：
• Windows 原生支持，IE6+ 到 Chrome/Firefox/Edge 全认
• 热点坐标内嵌在文件里，不用手写 4 4 偏移
• 文件体积小（通常 • 尺寸控制在 32×32px 内，避免 Safari 旧版截断或缩放失真
别为了“设计自由”硬上 SVG：Safari 15.4 之前根本不解析 url("icon.svg") 8 8, pointer，Firefox 对外部 SVG 的引用也极敏感（含 <image> 或 <use> 就失败）。
路径、MIME 类型和部署细节决定成败
90% 的“光标不显示”问题出在资源链路，不是 CSS 写法：
• 路径是相对于 .css 文件位置，不是 HTML 页面——写成 url("../assets/cursor.cur") 前先确认 CSS 文件在哪级目录
• 开发服务器必须返回正确的 MIME 类型：.cur → application/octet-stream，.svg → image/svg+xml，否则 Firefox 拒绝加载
• file:// 协议下 Chrome/Firefox 直接禁用 url() 加载，本地测试务必起服务（如 npx serve）
• 检查 Network 面板有没有 404 或 blocked:mixed-content，这些错误不会在 Console 报，但光标一定失效
移动端别白费力气
iOS Safari 和多数安卓浏览器压根不支持 url() 自定义光标，:hover 本身在触摸设备上也不可靠——你写的 cursor: url("grab.cur"), grab; 在 iPad 上永远只显示系统默认箭头。
• 别在响应式 CSS 里用 @media (hover: hover) 包裹自定义光标，它只影响 :hover 触发，不恢复 url() 支持
• 如果交互逻辑依赖光标变化（比如拖拽提示），必须用文字标签或 ARIA 状态同步传达，不能只靠视觉
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是语法，而是构建时路径拼错、上线后 MIME 配错、或者在真机上才发现 Safari 把整行声明当注释处理了。把.cur 放进 css/ 同级的 assets/ 目录，用 url("assets/hand.cur")，配 pointer fallback，再跑一遍 Network 面板确认 200，基本就稳了。 
