cursor: url() 必须配至少一个fallback关键字（如pointer），否则整条规则被忽略；svg需转base64 data url；尺寸≤128×128px；必须指定热点坐标，路径相对css文件。
直接用 cursor: url() 加载 SVG 或图片是可行的，但浏览器不会原样接受你写的任何路径或格式——它有硬性限制和隐含规则，不按套路来，光标就“消失”或回退成默认箭头。
为什么 cursor: url("icon.png") 不生效？
最常见原因是缺备用值。url() 后面**必须跟至少一个 CSS 光标关键字**，比如 pointer、auto 或 default。只写 url("x.png") 是无效声明，现代浏览器会直接忽略整条规则。
- 错误写法：
cursor: url("hand.png"); - 正确写法：
cursor: url("hand.png"), pointer; - 多个兜底更稳妥：
cursor: url("hand.cur"), url("hand.png"), pointer;（先试 .cur，再试 .png，最后 fallback 到 pointer）
url() 中的 SVG 怎么转成可用光标？
不能直接写 url("icon.svg")。SVG 文件需转为 base64 data URL，并确保编码正确。否则浏览器解析失败，跳过该 url() 项。
- 先对 SVG 字符串做
encodeURIComponent→unescape→window.btoa三步编码（顺序不能错） - 生成的 data URL 格式必须是：
data:image/svg+xml;base64,xxxx - 示例代码：
const svg = `<svg width="24" height="24" viewbox="0 0 24 24">...</svg>`;<br>const dataUrl = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));<br>element.style.cursor = `url(${dataUrl}) 12 12, default`;
图片尺寸、格式和热点坐标怎么设才不翻车？
Chrome / Edge / Safari 对自定义光标有严格尺寸上限：推荐 ≤32×32px，最大别超 128×128px。超限直接拒用，连 fallback 都不触发（部分旧版 Chrome 甚至静默失败）。
- 格式优先级：
.cur>.png>.gif；.jpg基本不支持，别试 - 热点坐标（
x y）可选，但强烈建议填：它决定鼠标点击时的逻辑落点。例如 24×24 图标中心点是12 12，不写就默认左上角0 0，导致“点哪不中哪” - 路径必须相对 CSS 文件位置，不是 HTML 文件——用 DevTools 的 Network 面板确认图片是否 200 OK
全局设置 body 光标时要注意什么？
给 body 设 cursor: url(...), auto 看似简单，实际容易踩两个坑：
- 子元素如果自己设置了
cursor（比如按钮设了pointer），会覆盖 body 的设置——这不是 bug，是 CSS 层叠规则 - 若页面有 iframe，且 iframe 内容跨域，它的光标不受父页控制；同源 iframe 才继承
- 性能提示：频繁切换大量元素的 cursor（如表格每行 hover）可能触发重绘，优先用 class 切换而非 JS 直接改 style
真正难的不是写对那一行 cursor，而是让所有浏览器在所有路径、尺寸、编码、降级场景下都稳定显示——后备值、尺寸、编码、坐标，四者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
