应避免直接在 body 上设置自定义光标，而需用高优先级选择器作用于内容容器并重置交互元素光标；确保 url() 路径正确、使用本地服务、优先选 .cur 文件；Safari 和移动端不支持，需降级为标准关键字。
直接设 body 的 cursor 会出问题
想让整个网页默认用自定义光标，很多人第一反应是写 body { cursor: url("cursor.cur"), default; }。这语法没错，但实际效果常被破坏：表单控件（input、select）、链接、按钮等元素自带 cursor 值，会继承或覆盖你设在 body 上的声明；更麻烦的是，子元素里文本、可编辑区域会“抢走”光标控制权，导致自定义光标只在空白处生效。
真正可靠的做法是：用高优先级选择器精准作用于「无交互语义的容器层」，比如主内容区外层 div 或 main，并显式重置内部交互元素的 cursor：
- 避免用
body或*全局设置，否则textarea里光标变不回text，用户无法感知输入焦点 - 给内容容器加类名（如
.site-canvas），再用.site-canvas * { cursor: inherit !important; }把光标控制权交还给子元素自身逻辑 - 若必须全局生效，得逐个重置关键元素：
input, button, a, label, [contenteditable] { cursor: auto; }，否则光标会在点击时突然跳回系统默认
url() 路径写错是静默失败的主因
本地开发时最常见现象：CSS 里路径看着对，浏览器控制台没报错，但光标始终是箭头——大概率是 url() 加载被静默拒绝了。这不是 bug，而是浏览器安全策略强制行为。
必须检查三点：
- 绝对不能用
file://协议打开 HTML：Chrome/Firefox 会直接屏蔽所有url()请求，连 Network 面板都看不到记录。必须起本地服务，比如用npx http-server或 VS Code Live Server 插件 - 路径必须相对于 CSS 文件位置，不是 HTML。例如 CSS 在
/css/style.css，图片在/img/cursor.cur，就得写url("../img/cursor.cur")，而不是url("/img/cursor.cur") - .cur 文件比 .png 更稳：Windows 原生支持热区，Chrome/Firefox 对 .cur 解析容错更强；PNG 必须手动加热区坐标，如
url("hand.png") 16 16, pointer;，漏掉坐标 Firefox 可能拒载
Safari 和移动端根本不会加载自定义光标
别浪费时间调试 iOS Safari 或 Android Chrome 的 url() —— 它们压根不实现该功能。Safari macOS 仅支持同源 .cur，且经常忽略热区；iOS/Android 则完全无视 cursor 声明（触摸设备无鼠标概念，CSS 规范允许 UA 直接跳过）。
这意味着：
- 响应式项目里给
.mobile-menu-toggle写cursor: url(...)是无效代码，删掉省事 - 如果设计稿要求“全平台统一光标”，唯一可行方案是放弃自定义图，改用标准关键字（
pointer、move等），它们跨平台 100% 生效 - 用 Webpack/Vite 构建时，确保 .cur 文件进了 asset 处理流程，否则打包后路径 404，生产环境照样不显示
Base64 内联看似方便，实则埋雷
把 .cur 转成 Base64 嵌进 CSS，确实能绕过路径和请求问题，但代价不小：
- Base64 字符串极长，污染 CSS 文件体积，且无法被浏览器缓存，每次页面加载都得重复解析
- 某些旧版 Safari 会因字符串超长截断
url()声明，导致整条规则失效 - 热区坐标在 Base64 中仍需显式声明：
cursor: url("data:image/x-icon;base64,...") 2 2, pointer;，漏写就退化为 fallback - 真正轻量场景才考虑它，比如仅一个图标、尺寸 ≤ 16×16px、且确定不需热区微调
热区坐标这个点最容易被忽略：.cur 文件自带热区，.png 必须手算。比如一张 32×32 的手型 PNG，你希望点击点落在指尖，就得测出指尖像素坐标（如 x=12, y=28），写成 url("hand.png") 12 28, pointer;。坐标错一位，用户点按钮时感觉“偏了”，就是这儿的问题。
