cursor属性支持url()自定义图标和关键字两类值，其中url()需配fallback关键字，推荐尺寸≤128×128px，热点需显式指定，且移动端Safari不支持。
cursor属性支持哪些自定义值
CSS 的 cursor 属性允许你替换系统默认指针，但不是所有值都真正“自定义”：
- 关键分两类：
url()（真自定义图标）和关键字（如pointer、zoom-in） -
url()必须配一个备选关键字，否则加载失败时指针会消失（浏览器不渲染空 cursor） - 图标尺寸建议 ≤ 128×128px，过大可能被截断或缩放失真；IE 仅支持 .cur/.ani 格式，现代浏览器支持 .png/.svg（但 Safari 对 SVG 支持不稳定）
- 热点（hotspot）需显式指定，例如
url(cursor.svg) 16 16, auto表示图标左上角偏移 16×16 像素处为点击点
用url()加载本地图标时常见加载失败原因
本地自定义光标经常“看不见”，多数不是代码写错，而是路径或格式问题：
-
url()中路径是相对于 CSS 文件位置，不是 HTML 页面，容易误写成相对 HTML 的路径 - 开发服务器未启用 CORS 时，
file://协议下 Chrome/Firefox 会直接拒绝加载本地url()图标（报错Not allowed to load local resource） - 没提供 fallback 关键字，例如写成
cursor: url(arrow.cur);而非cursor: url(arrow.cur), default;，一旦文件 404 或格式不识别，指针就变空白 - 图标本身无透明通道或背景色与页面冲突，导致“看不清”，建议用带 alpha 的 PNG 并在设计时预留 1–2px 边距
在 React/Vue 等框架中动态切换 cursor 的坑
框架组件内通过 class 切换 cursor 很常见，但要注意：
- 不要依赖内联样式写
style={{ cursor: 'url(...) 0 0, pointer' }}，因为 React 会把字符串原样传给 DOM，而部分浏览器对引号/空格敏感，易解析失败；推荐用 className + CSS 类控制 - Vue 的
v-bind:style同样存在字符串拼接风险，尤其含空格和逗号时，应封装为计算属性返回完整有效值 - 如果 cursor 需响应数据状态（如 loading 中显示
wait），确保状态更新及时，避免因异步延迟导致指针残留旧状态 - 移动端 Safari 不支持
url()自定义 cursor，且cursor在触摸设备上基本无效——别在移动端依赖它做交互提示
cursor性能与可访问性影响不能忽略
看似轻量的 cursor 更改，实际有隐性成本：
- 频繁切换
url()光标（如 hover 时加载不同图标）会触发多次资源请求，造成闪烁或卡顿，尤其网络慢时 - 屏幕阅读器完全忽略
cursor变化，它不传递语义；若靠指针形状暗示操作（比如手型=可拖拽），必须同步提供文字提示或 ARIA label - 某些高对比度模式下，自定义光标会被系统强制替换为粗线十字，此时 fallback 关键字是否语义准确就很重要（比如用
move比default更能传达意图）
实际项目里，最常被漏掉的是热点坐标和 fallback 关键字的组合写法，以及没意识到移动端根本不会渲染它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
