css cursor属性控制鼠标样式需注意：仅桌面端生效；必须配fallback关键词；file://协议下url()静默失效；内置关键字兼容性最佳；自定义光标需32×32尺寸、http协议运行、避免pointer-events: none干扰；base64内联需双引号和fallback；高dpi需2x图及热区坐标；作用范围须精确限定。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在网页中通过CSS的cursor属性控制鼠标样式，必须明确光标仅在桌面端生效、需配合fallback关键词、且本地file://协议下url()会静默失败——这些是实际开发中踩坑最多的地方。
用内置关键字快速设置基础光标
直接在CSS里写预定义值，无需图片资源，兼容性最好。
给按钮加手型光标：.btn { cursor: pointer; }
让文本区域显示竖线光标：.editable { cursor: text; }
禁用交互时显示禁止符号：.disabled { cursor: not-allowed; }
【not-allowed不是所有旧版IE都支持】 若需兼容IE10以下，改用default并配合视觉灰度提示。
用本地图片实现自定义光标
这是最常出问题的环节。浏览器对路径、格式、尺寸、协议都有硬性限制。
第一步：准备一张32×32像素的.png或.cur文件，放在项目/img/cursors/目录下
第二步：在CSS中声明，注意逗号后必须跟一个fallback关键词：.custom { cursor: url("../img/cursors/hand.cur"), pointer; }
第三步：确保页面通过http://localhost运行——【file://协议下url()必然失效】，哪怕路径完全正确也不会加载图片，控制台也无报错，只会回退到pointer。
第四步：检查父级元素没设pointer-events: none，否则子元素的cursor声明直接被忽略。
用Base64内联方式避免路径问题
适合轻量、静态、不频繁更换的光标，比如品牌定制小图标。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
方法一：用在线工具把32×32 PNG转成Base64字符串
方法二：复制字符串，嵌入CSS：.brand-cursor { cursor: url("data:image/png;base64,iVBORw..."), default; }
注意双引号不能省，末尾的default也不能少，否则整条声明无效。
为高DPI屏幕提供清晰光标
Retina屏上普通32×32光标会模糊，必须提供2x版本并用媒体查询切换。
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .sharp-cursor { cursor: url("../img/cursors/hand@2x.png") 16 16, pointer; } }
热区坐标16 16表示点击点在图像正中心，单位是像素，从左上角原点起算。
如果PNG热区没设准，用户点击位置和视觉中心会偏移——比如手型图标指尖没对准鼠标点，交互感就崩了。
限制作用范围防止污染全局
千万别在body上直接写cursor: url(...)，否则所有链接、输入框、下拉菜单都会继承这个光标，破坏原生交互反馈。
正确做法是精确绑定到特定容器：.interactive-zone { cursor: url("arrow.cur"), auto; }
再重置内部可点击子元素：.interactive-zone a, .interactive-zone button { cursor: pointer; }
这一步漏掉，用户 hover 到按钮上看到的还是自定义箭头，而不是应有的手型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
