cursor合法值分三类：关键字（如auto、pointer）、url()加热点坐标和fallback关键字的组合（如cursor: url(./c.png) 4 4, pointer;）、多url回退链；必须指定热点坐标和fallback，路径需相对css文件，仅支持.cur和带alpha的.png。
cursor属性支持哪些合法值
直接写 cursor: url(...) 很容易报错，因为浏览器只接受特定格式的值，且顺序和 fallback 机制必须严格满足。合法值分三类：auto、pointer 等关键字，以及 url() 加关键字 fallback 的组合。
-
url()必须跟一个备选关键字（如default、none、pointer），否则 Safari 和旧版 Edge 会忽略整条声明 - 图片尺寸建议 ≤ 32×32 像素，超出部分在部分浏览器（尤其是 Windows 上的 Chrome）可能被裁剪或失效
- 支持的图片格式只有
.cur（原生光标格式）和带透明通道的.png；.jpg或无 alpha 的.png会导致光标背景发黑 - 路径必须是相对当前 CSS 文件位置，不是 HTML 页面位置——这点常被忽略，导致 404 但控制台不报错
用 url() 加载自定义图片光标的正确写法
不是简单写 cursor: url(icon.png) 就完事。必须带坐标偏移和 fallback，且语法容错率极低。
- 完整写法示例：
cursor: url(./assets/cursor-hand.png) 4 4, pointer;，其中4 4表示热点（hotspot）坐标，单位是像素，从左上角算起 - 热点坐标必须写，即使为
0 0；漏掉会导致整个声明无效（Chrome 会静默降级，Firefox 可能完全不生效） - 多个
url()可以逗号分隔实现回退，例如：cursor: url(bad.cur), url(fallback.png) 0 0, default; - 使用
data:URL 是可行的，但 Base64 过长会影响可维护性，且 IE 完全不支持
常见失效场景与调试方法
光标不换，大概率不是代码没写，而是被“看不见”的条件拦住了。
- 父元素设置了
pointer-events: none，子元素再怎么设cursor都无效 - CSS 优先级被覆盖：检查是否被更具体的规则（比如
button:hover）重写了cursor - 图片加载失败时，浏览器不会提示，只会跳过该
url()尝试下一个，直到 fallback；打开 Network 面板确认图片是否 200 - 本地文件协议（
file://）下，Chrome 出于安全限制会拒绝加载url()光标，必须走本地服务器（如python3 -m http.server）
兼容性与性能注意点
看似简单的功能，在跨平台和跨浏览器时差异不小。
- Windows 对
.cur支持最稳，macOS 和 Linux 更依赖.png+ alpha；纯色光标推荐直接用url()而非 SVG（SVG 光标在 Safari 中支持差） - 频繁切换光标样式（如拖拽中动态换图）可能触发重绘开销，尤其在低端设备上；建议预加载所有用到的光标资源
- 移动端 Safari 完全忽略
cursor属性（触摸设备无 hover 概念），加了也白加 - 如果用 Webpack/Vite，确保图片路径经 loader 处理；否则
url(./x.png)可能被当作字面量保留，最终 404
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
