cursor原生稳定值仅default、pointer、text、move、not-allowed、wait、help等十几个；grab/grabbing须成对使用并配user-select:none；自定义光标需32×32/64×64 PNG或.cur，url()后紧跟fallback关键字；移动端基本不支持；cursor变化触发重排且影响可访问性。
cursor 属性支持哪些标准值
浏览器原生支持的 cursor 值其实就那么十几个，别被 MDN 列表吓到——真正稳定可用的也就 default、pointer、text、move、not-allowed、wait、help 这些。像 vertical-text 或 cell 在 Safari 里压根不认，Chrome 虽然解析但行为不一致。
常见错误是直接写 cursor: grab 却没配 grabbing 的 hover 状态，结果拖拽开始时指针卡在旧样式上。还有人把 alias 当成“可点击”，其实它只是表示“这个东西能复制/链接过去”，语义和交互意图完全错位。
-
grab和grabbing必须成对使用，且建议加user-select: none防止拖拽时意外选中文本 -
context-menu在 Firefox 中会触发右键菜单，但在 Chrome 里只是个图标，别依赖它做功能引导 -
zoom-in/zoom-out在 macOS 上常被系统手势劫持，实际响应率低于 30%
自定义 cursor 图片怎么写才不炸
用 url() 加载自定义光标图片，最常踩的坑不是路径错，而是尺寸和格式不达标：必须是 32×32 或 64×64 像素的 PNG（带透明通道），且文件体积不能超 128KB。超出就静默回退到 default，连控制台警告都没有。
另一个隐形雷是 fallback 顺序写错。CSS 要求每个 url() 后必须紧跟一个关键字 fallback，而且必须写在最前面——否则整个声明无效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
cursor: url("hand.cur"), pointer; - 错误写法：
cursor: pointer, url("hand.cur");（浏览器直接忽略整条规则） - .cur 文件比 PNG 更稳，尤其在 Windows 高 DPI 下；但生成得用专业工具，
convert命令转出来的往往缺 hotspot 定义
cursor 在不同场景下的表现差异
cursor 不是纯视觉属性，它和事件流、焦点管理、甚至操作系统设置强耦合。比如在 iframe 里设 cursor: none，Chrome 会生效，Safari 则只在 iframe 内部生效，移出后立刻恢复系统默认。
更麻烦的是移动端：iOS Safari 完全忽略所有 cursor 声明（包括 none），Android Chrome 虽支持但仅限于 pointer 和 default，其余值统统 fallback。
- 触摸屏设备上，
cursor几乎无意义，别为它写媒体查询做“适配” - 当元素有
transform: scale(0.5)时，自定义 cursor 图片会按缩放前尺寸渲染，导致模糊或偏移 - 如果父容器设了
cursor: not-allowed，子元素即使单独设pointer，hover 时仍可能继承父级样式（取决于是否触发重绘）
性能与可访问性容易被忽略的点
每次 cursor 变化都会触发 layout 重排（哪怕只是换图标），高频切换（比如 canvas 绘图时实时反馈笔触类型）会导致掉帧。更关键的是，cursor: none 对屏幕阅读器用户极不友好——他们靠光标位置定位焦点，一关就等于断掉导航线索。
- 避免在
:hover里动态切多个url()，改用 CSS sprite +background-position模拟更稳 - 如果业务真需要隐藏光标（如 kiosk 模式），至少保留
focus-visible样式，并确保键盘 Tab 流畅 - 高对比度模式下，自定义 cursor 图片可能被系统强制替换，此时 fallback 关键字必须语义准确（比如用
text而不是default）
真正难的从来不是写对那行 CSS，而是想清楚：这个光标变化，到底是在帮用户理解界面，还是在制造新的认知负担。
