🖱️
CSS 光标预览
一览所有 CSS cursor 取值(pointer、grab、zoom-in…)的鼠标样式，点击复制。
本地处理 · 不上传
加载工具中…
相关：cursor · 光标 · 鼠标 · 指针 · css
CSS 光标预览列出所有 cursor 取值并可直接悬停体验实际效果，方便为交互元素挑选合适的鼠标指针样式。
使用步骤
- 浏览全部光标类型
- 悬停在色块上查看实际样式
- 复制需要的 CSS 值
- 按用途分类查找
使用场景
- 为可点击元素设置正确的指针样式
- 为禁用状态选择合适的光标
- 实现拖拽与缩放的视觉提示
- 检查各光标在当前系统下的样式
小贴士
- 按钮和链接应该用 pointer，可选中的文字用 text，禁用状态用 not-allowed——错误的光标会给出误导性的可交互暗示。
- 光标的实际图形由操作系统提供，同一个取值在 Windows、macOS 与 Linux 上长得并不一样。
- 自定义光标图片应控制在 32×32 以内并务必提供后备关键字，图片加载失败时才不会退回默认箭头。
常见问题
按钮该用什么光标？
用 pointer（手型）。原生 button 元素默认是箭头，需要手工设置。注意不要给不可点击的元素设 pointer，那是错误的可交互暗示。
能用自定义图片吗？
可以，写法是 `cursor: url(x.png) 4 4, pointer`。必须在最后加一个标准关键字作为后备，且热点坐标要正确设置，否则点击位置会有偏差。
为什么在不同电脑上样子不一样？
CSS 只声明光标的语义类型，具体图形由操作系统的光标主题决定。这是有意的设计，让光标与用户的系统环境保持一致。
CSS 光标预览是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 光标预览，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。