无需登录 数据私有 本地保存

CSS鼠标样式生成器 - 自定义光标图形

22
0
0
0

CSS 鼠标样式生成器

实时预览 · 内置40+光标类型 · 支持自定义光标图形 · 一键生成CSS代码

自定义光标
支持 PNG / SVG / CUR / JPEG / GIF
预设：
实时预览区
鼠标移至此区域查看光标效果 当前：pointer
按钮元素
超链接文本
搜索输入框...
拖拽
🖱️ 当前光标样式已应用至预览区
在桌面端浏览器中查看完整光标效果
生成的 CSS 代码 cursor: pointer;

常见问题 & 知识库

什么是 CSS cursor 属性？
CSS cursor 属性用于定义当鼠标指针悬停在元素上时显示的光标样式。它可以设置为浏览器内置的预定义光标类型（如 pointer、crosshair、text 等），也可以使用自定义图片作为光标。该属性广泛用于增强用户体验，帮助用户理解界面元素的交互方式。
如何自定义鼠标光标图形？
使用 cursor: url('图片地址'), fallback光标; 语法。例如：cursor: url('custom-cursor.png') 10 20, pointer; 其中 10 20 是热点坐标（相对于图片左上角的像素偏移），pointer 是图片无法加载时的备用光标。支持 PNG、SVG、CUR、JPEG、GIF 等格式。注意：.cur 文件自带热点信息，无需额外指定坐标。
光标热点（hotspot）是什么？如何设置？
热点是光标图片中实际点击生效的精确位置。例如箭头光标的尖端、十字准星的中心。在CSS中设置：cursor: url('img.png') <x> <y>, fallback;，其中 x 和 y 是从图片左上角开始的像素偏移。对于 32×32 的圆形图标，热点通常设在 (16, 16) 即中心位置。如果不指定，浏览器默认使用 (0, 0)。
自定义光标支持哪些图片格式？各有什么优劣？
PNG：最通用，支持透明背景，推荐尺寸 ≤32×32px，几乎所有现代浏览器支持。
SVG：矢量格式，缩放不失真，Chrome/Edge 支持良好，Firefox 需要设置明确宽高且不支持某些CSS特性。推荐使用内联 data URI。
CUR：Windows 原生光标格式，自带热点信息，兼容性最好（包括旧浏览器）。
JPEG/GIF：JPEG无透明通道不推荐；GIF动画在cursor中不会播放，仅显示第一帧。
光标图片的推荐尺寸是多少？
推荐尺寸为 32×32 像素或更小。Chrome 浏览器限制光标图片最大为 128×128px，超出可能被缩放或忽略。较大的图片可能导致性能问题或显示异常。对于高DPI屏幕，可以使用 64×64px 的图片以获得更清晰的显示效果，但要注意文件大小。建议保持在 5KB 以内以确保快速加载。
自定义光标在移动端（触屏设备）有效吗？
在触屏设备上，没有传统的光标概念，因此 cursor 属性在手机和平板上基本无效果。不过，在平板连接鼠标或使用触控板时，自定义光标仍然生效。建议在开发时始终提供 fallback 光标，并确保网站在触屏设备上的交互不依赖光标样式。本工具主要面向桌面端网页开发。
grab 和 grabbing 光标有什么区别？何时使用？
grab 表示元素可被拖拽（手型张开），通常用于可拖拽元素的默认状态。而 grabbing 表示正在拖拽中（手型握紧），应在用户按住鼠标拖拽时使用（如通过 JavaScript 在 mousedown 时切换）。两者配合使用能显著提升拖拽交互的直观性。注意：部分旧浏览器需要使用 -webkit-grab 和 -webkit-grabbing 前缀。
cursor: none 在什么场景使用？
cursor: none 会完全隐藏鼠标光标。常见场景包括：全屏沉浸式体验（如视频播放器、游戏）、Kiosk自助终端、演示模式、自定义光标替代方案（用JS跟踪鼠标并用DOM元素模拟光标）、以及需要隐藏光标以避免干扰的创意网页。使用时要确保提供键盘导航等无障碍替代方案。
如何为网站的不同元素设置不同的光标？
通过CSS选择器为不同元素指定 cursor 属性。例如：a:hover { cursor: pointer; }、input[type="text"]:hover { cursor: text; }、.draggable { cursor: grab; }、.draggable:active { cursor: grabbing; }。也可以使用 * 通配符全局设置，但建议仅在特定交互元素上使用以保持用户体验的一致性。
浏览器对 cursor: url() 的兼容性如何？
现代浏览器（Chrome 90+、Firefox 88+、Safari 14+、Edge 90+）均良好支持 cursor: url()。Chrome 对SVG data URI支持最佳；Firefox 要求SVG设置明确的 width/height 属性；Safari 对超大光标图片限制较严格（通常≤32×32）。建议同时提供 .cur 和 .png 格式作为 fallback：cursor: url('custom.svg'), url('custom.png'), url('custom.cur'), pointer; 以覆盖所有浏览器。
🔧 相关工具