cursor合法值包括标准关键字（default、pointer、text等）、url()函数（须配fallback）、部分浏览器支持的none；自定义光标在Safari仅支持同源.cur文件，移动端基本不支持；需兼顾可访问性与语义化。
cursor属性能设哪些合法值
cursor 接收关键字、URL路径或函数调用，但不是所有值在所有浏览器都可靠。最稳妥的是标准关键字：default、pointer、text、move、not-allowed、wait、help 等。自定义图标要用 url() 函数，且必须配一个 fallback 关键字，比如 cursor: url("hand.cur"), pointer;。漏掉 fallback 会导致某些浏览器（尤其是 Safari）直接忽略整条声明。
注意：url() 路径不支持相对路径中的 ../ 回退（部分旧版 Chrome 会失败），建议用根相对路径如 /assets/cursor-hand.cur；.cur 文件比 .png 更兼容，尤其在 Windows 上；若用 PNG，需加尺寸限制（通常 ≤32×32px），否则 Firefox 可能拒载。
为什么自定义光标在 Safari 或移动端没反应
Safari 对 cursor 的支持有硬性限制：只接受本地同源的 .cur 文件，拒绝 data URL 和跨域资源；iOS 和 Android 浏览器基本不支持任何自定义 cursor（触摸设备无鼠标概念，CSS 规范也明确允许 UA 忽略该属性）。所以别在响应式项目里对 .mobile-menu-toggle 设 cursor: url(...)——它永远不会生效。
常见误判场景：
- 用 Webpack/Vite 构建时把 .cur 文件放在
src/但没配 asset 处理规则，结果打包后路径 404 - 本地开发用 file:// 协议打开 HTML，Chrome 会因安全策略阻止
url()加载 - 设置了
cursor: none想隐藏光标，但仅 Firefox 支持，其他浏览器当无效值处理
如何让光标在按钮悬停时精准切换形状
关键不是只写 :hover，而是确保目标元素有交互能力：默认 <div> 没 <code>cursor 响应，除非加 role="button" 或 tabindex="0"，否则键盘用户和屏幕阅读器都不可见。更实际的做法是直接用语义化标签：
<button style="cursor: zoom-in;">放大</button>
<a href="#" style="cursor: copy;">复制链接</a>
如果必须用 div 模拟按钮：
- 加
role="button"和tabindex="0" - 用
:focus-visible补充焦点态样式，避免仅靠:hover忽略键盘操作 - 慎用
cursor: progress：它表示“正在处理”，但不会自动恢复，得手动切回default或pointer，否则用户会以为卡死
cursor性能和可访问性容易被忽略的点
cursor 本身开销极小，但滥用自定义图标会触发额外网络请求和解码（尤其大尺寸 PNG）。更严重的是可访问性风险：色盲用户可能无法识别纯颜色变化的光标（比如只改了 cursor: url("red-arrow.png")），而屏幕阅读器完全不读取 cursor 值——它不传达语义，只影响视觉反馈。
真正该做的：
- 用
pointer表示可点击，text表示可编辑，这是用户已形成的认知习惯，别为了“设计感”乱改 - 如果业务强依赖光标提示（如绘图工具），必须同步提供文字标签或 ARIA
aria-label - 测试时关掉图形加速（Chrome 开发者工具 → Rendering → Paint flashing），确认没有因
cursor引发意外重绘
cursor 需求靠 3–4 个标准关键字就能解决。花时间调一个 .cur 文件，不如先检查按钮是否真被用户识别为可交互元素。
