UD5工具箱
什么是CSS cursor属性？它有哪些常用值？
CSS cursor属性用于设置鼠标指针在元素上时的外观。常用值包括：pointer（手型，表示可点击）、default（默认箭头）、text（文本选择光标）、move（移动光标）、wait（等待/加载）、not-allowed（禁止操作）、crosshair（十字准星）、grab（可抓取）等。完整列表包含30余种内置光标样式。本工具的预设光标库涵盖了其中最常用的样式，用户无需记忆这些关键字即可快速生成代码。
如何使用自定义图片作为光标？
使用CSS的url()函数引用图片，语法为：cursor: url('图片地址') [x] [y], fallback; 其中x和y是热点坐标（可选），表示光标的"点击点"。推荐使用小尺寸图片（32x32或64x64像素），支持PNG、JPG、SVG、GIF格式。务必设置fallback光标以防图片加载失败。本工具的"自定义图片"模式会自动完成Base64编码和语法生成，用户只需上传图片并调整参数即可。
自定义光标的"热点(hotspot)"是什么意思？
热点是光标图片中代表"点击位置"的像素坐标。例如，一个箭头光标的热点通常在箭头尖端（约0,0位置），而一个圆形光标的热点通常在圆心。在CSS中设置：cursor: url(img.png) 16 16, auto; 表示热点在图片的(16px, 16px)位置。合理设置热点能让用户准确点击目标。如果热点设置不当，用户可能感觉点击位置与实际响应位置存在偏差，影响交互体验。
SVG光标相比图片光标有什么优势？
SVG光标使用矢量图形，具有以下优势：文件极小，可直接内联为Data URI无需额外HTTP请求；任意缩放不失真，适配高DPI屏幕；可通过CSS或JS动态修改颜色和形状；无需外部文件，便于管理和维护。使用方式：cursor: url("data:image/svg+xml,...") x y, fallback; 本工具的SVG模板模式支持六种常用图形，每种都可自定义颜色、大小和描边参数，生成的代码可直接使用。
为什么我的自定义光标没有显示？
常见原因包括：图片尺寸过大（浏览器通常限制光标图片最大为128x128像素）、图片路径错误或跨域问题、缺少fallback值导致加载失败后无可见光标、图片格式不推荐（建议使用PNG或SVG）、Data URI编码错误。排查方法：先确认图片尺寸在合理范围内，检查路径或Data URI是否正确，确保设置了fallback光标，尝试使用PNG格式替代其他格式。使用本工具生成的代码已内置正确的编码和fallback设置。
可以在不同元素上使用不同的光标吗？
当然可以，这是CSS光标最常见的用法。你可以为按钮设置cursor: pointer;，为输入框设置cursor: text;，为拖拽区域设置cursor: grab;。通过CSS选择器精准控制每个元素的光标样式，能极大提升用户体验和界面可用性。本工具生成的代码片段可以应用到任意CSS选择器中，例如body、.my-class、#element-id等，方便用户按需定制不同区域的光标效果。
上传的图片会被保存到服务器吗？
不会。本工具的所有处理均在浏览器本地完成。您上传的图片文件会被读取为Base64编码并直接嵌入生成的CSS代码中，整个过程不涉及任何网络传输。图片数据不会被发送到任何服务器，也不会被存储或记录。这意味着您可以放心上传任何图片，包括含有敏感信息的截图或设计稿。关闭页面后，所有数据自动清除。
生成的CSS代码如何应用到网页中？
有三种常用方式：第一种是在外部CSS文件中，将cursor规则添加到对应选择器中，如body { cursor: url('...') 0 0, auto; }；第二种是在HTML文档的style标签中嵌入；第三种是直接添加到元素的style属性中作为行内样式。对于全站生效的光标，建议将规则应用到body选择器上；对于特定区域的光标，使用类选择器或ID选择器。记得引入对应的图片文件（如果不是Data URI方式的话），确保图片路径正确。