预览区域

将鼠标移到此处预览光标效果 cursor: default

CSS 光标值

自定义光标

支持 PNG/SVG/GIF/CUR 格式，推荐 32×32 像素。图片越大会自动缩放至 32×32。

自定义热点 (hotspot):

X

Y

生成的 CSS 代码

cursor: default;

💡 使用说明

1. 点击任意光标卡立即预览效果
2. 也可上传自定义图片作为光标
3. 点击"复制 CSS"一键拷贝到剪贴板

❓ 常见问题

cursor 属性有哪些常用值？

CSS cursor 属性定义了鼠标指针悬停时的样式。常用值包括：default（默认箭头）、pointer（手型，可点击元素）、text（文本选择）、wait（等待中）、grab/grabbing（可拖拽/拖拽中）、zoom-in/zoom-out（缩放）等。不同操作系统和浏览器呈现效果可能有细微差异。

如何使用自定义光标图片？

使用 cursor: url('image.png'), auto; 语法。第一个值为自定义图片URL，逗号后跟后备光标值。推荐图片尺寸为 32×32 像素，支持 .cur、.png、.svg、.gif 格式。通过 url() 可指定热点坐标，如 cursor: url('image.png') 4 4, auto; 表示热点在 (4,4) 像素位置。

自定义光标在不同浏览器中兼容吗？

现代浏览器均支持自定义光标。建议提供 .cur 或 .png 格式图片以获得最佳兼容性。始终在 url() 后追加一个标准光标值作为 fallback，如 cursor: url('custom.cur'), pointer;。SVG 格式在部分老旧浏览器中不支持。

cursor 属性可以应用动画吗？

CSS cursor 本身不支持动画。如果需要动态光标效果，可以通过 CSS 动画改变光标所在元素的样式（如闪烁），或使用多帧 GIF 图片作为自定义光标——但这在部分浏览器中不支持 GIF 动画帧。推荐保持光标简洁，避免过度设计影响用户体验。

🖱️ CSS cursor 光标生成器