cursor: url() 自定义光标常因路径错误、格式不兼容（Firefox限128×128px .cur/.png）、缺少fallback、本地file://协议限制或热点未定义而失效，需严格遵循语法并实测多浏览器。
直接用 cursor: url() 可以自定义光标，但浏览器兼容性和路径处理是最大障碍，不是简单换张图片就能生效。
为什么 cursor: url("icon.cur") 经常不显示
常见现象：本地开发时图标不出现，或只在 Chrome 里有效，Firefox/Edge 完全没反应。
-
url()中的路径必须是相对 CSS 文件位置，不是 HTML 页面位置 —— 这点极易搞错 - Firefox 要求图标尺寸 ≤ 128×128px，且只支持
.cur或带透明通道的.png；Chrome 对 PNG 更宽容，但若未指定热点（hotspot），鼠标点击点会偏移 - 必须配一个后备光标（fallback），比如
cursor: url("hand.cur"), pointer，否则当url()失效时整个声明被忽略，回退到默认箭头 - 本地文件协议（
file://）下，Chrome 会因安全策略阻止url()加载，需走本地服务器（如python3 -m http.server）测试
cursor: url() 的正确写法与参数细节
语法本身简单，但参数顺序和格式容错率极低：
- 必须写成
cursor: url("path/to/cursor.cur"), auto形式，逗号后紧跟一个标准关键词作为 fallback —— 不能写成url(...), url(...), pointer - 如果用 PNG，推荐加热点坐标：
cursor: url("hand.png") 4 12, pointer，其中4 12表示从左上角起第 4px 横向、12px 纵向的位置为点击基准点（类似 Photoshop 的图钉定位） - IE 仅支持
.cur，且要求文件含内置 hotspot；现代浏览器中.cur兼容性最稳，可用在线工具（如 convertio.co）把 PNG 转成带 hotspot 的 CUR
用 CSS 生成简易光标（无图片依赖）
当只需视觉微调（比如加个圆圈、改颜色），不用折腾图片：
- 用伪元素 +
cursor: none隐藏原光标，再绝对定位一个::before模拟光标，配合pointer-events: none避免遮挡交互 - 注意：此方案在拖拽、文本选中等场景行为异常，仅适合按钮/卡片类悬停反馈
- 性能敏感页面慎用，频繁重绘伪元素可能触发 layout
真正难的不是写那行 cursor: url()，而是确认图标格式、路径解析上下文、fallback 是否兜底，以及是否在目标环境（尤其是 Safari iOS 或旧版 Edge）中实测过。很多“不生效”问题，其实卡在开发服务器没启，或者误把 PNG 当 CUR 用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
