cursor属性唯一支持的自定义值是url()，必须配合回退关键字（如pointer），且仅接受.cur或带alpha的.png格式；需指定热点坐标、路径相对于css文件、尺寸≤128×128px，并在移动端禁用。
cursor属性支持哪些自定义值
cursor 属性能直接用的自定义值其实只有 url()，其他像 pointer、text 都是预设关键词。真正“自定义样式”指的就是用图片替换默认光标，语法是：cursor: url("path/to/cursor.cur"), fallback;。注意两点：必须带后缀（.cur 或 .png），且必须跟一个备选关键词（如 auto 或 default），否则整个声明会被浏览器忽略。
-
.cur是 Windows 原生光标格式，支持热点（hotspot）定义，兼容性最好 -
.png虽然直观，但 Safari 旧版本和部分安卓 WebView 不支持，且无法指定热点，默认以左上角为点击点 - 热点偏移要用像素单位写在
url()后面，比如url("hand.cur") 4 6, auto表示热点在图片内 (4px, 6px) 处
为什么本地测试时 cursor 图片不生效
最常见原因是路径错误或 MIME 类型不匹配。开发时用 file:// 协议打开 HTML，Chrome 和 Firefox 会拒绝加载本地 url() 中的图片（安全限制），表现为光标完全不变或回退到备选值。
- 改用本地服务器启动，比如
npx serve或 VS Code 的 Live Server 插件 - 检查控制台是否报
Failed to load resource: net::ERR_FILE_NOT_FOUND，确认路径是相对于 CSS 文件位置，不是 HTML - 如果用
.png，确保 Web 服务器返回Content-Type: image/png；某些静态托管（如 GitHub Pages）可能默认返回text/plain，导致失效
cursor: url() 的尺寸和性能限制
浏览器对自定义光标有硬性约束，超限就会静默降级到备选值，不报错也不提示。
- 尺寸上限通常是 128×128px（Chrome/Firefox），超出则忽略该
url()声明 - 文件体积建议控制在 2KB 以内，大图会导致悬停响应延迟，尤其在低端设备上
- 不要对大量元素（如每行
<li>）都设不同url()，CSS 引擎会反复解码同一张图，实测比用单个 class 全局覆盖慢 30%+ - 动画光标（如旋转箭头）不能靠 GIF 实现——
cursor不支持动画，只能用 JS 每帧切换url()，但代价高，不推荐
移动端和高 DPI 屏幕的适配要点
iOS 和 Android 基本不支持 cursor: url()，所有自定义光标声明会被无视，只认备选关键词。所以别在 @media (hover: hover) 外层盲目加。
- 高 DPI 屏幕（如 MacBook Retina）会自动放大
.cur，但.png需手动提供 2x 版本并用image-set()，目前仅 Safari 支持，实用性低 - 更稳妥的做法是：先用
@supports (cursor: url())包裹自定义规则，再配合@media (hover: hover) and (pointer: fine)确保只在真有光标的设备上启用 - 如果设计要求“手型光标”，优先用
cursor: pointer—— 它在所有平台都一致，且语义清晰，比一张小图更可靠
实际项目里，真正需要 url() 的场景极少。多数所谓“自定义”需求，用预设值组合（比如 cursor: zoom-in + transition）或伪元素模拟，反而更稳、更轻、更可访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
