CSS光标样式大全
可视化展示所有 CSS cursor 属性（如 pointer, help, crosshair），并提供一键复制功能。
CSS 光标样式大全
CSS 光标样式大全工具使用指南
📌 简介
CSS 光标样式大全工具是一款专为前端开发者和 UI 设计师打造的交互式速查手册。在网页交互设计中，鼠标光标的形状变化（如悬停在链接上变成小手 `pointer`，悬停在文本上变成竖线 `text`）是给用户最直接的视觉反馈。然而，CSS 中存在着数十种不同的光标属性，很多开发者平时只用 `pointer` 和 `default`。本工具将所有的标准光标样式一网打尽，并提供了所见即所得的悬停预览和一键复制代码功能。
📖 浏览器中的光标 UX 规范
合理使用光标能极大提升用户体验：pointer（小手）用于所有可点击的交互元素（按钮、链接）；not-allowed（禁止号）用于被禁用的按钮；grab / grabbing（抓手）常用于可拖拽的画布、地图或看板；zoom-in / zoom-out用于图片放大预览；col-resize / row-resize常用于表格列宽拖拽。如果您将本工具中的光标悬停在不同方块上，您真实的鼠标指针会立刻变成对应的样式，帮您直观地找到最符合当前业务场景的图标。
💼 常见应用场景
- 后台系统开发： 为数据表格的表头添加 `col-resize`，提示用户可以拖拽调整列宽。
- 富文本编辑器： 在文本编辑区域使用 `text`，在菜单按钮区使用 `default`，明确操作意图。
- 文件上传组件： 将拖拽上传区域的光标设为 `copy` 或 `alias`，增强交互暗示。
⚙️ 使用步骤
- 移动鼠标到不同的卡片上方，感受实际的光标样式。
- 找到满意的光标后，点击该卡片。
- 完整的 CSS 代码（如 `cursor: pointer;`）会自动复制到剪贴板。
- 粘贴到您的 CSS 样式中即可生效。
⚠️ 注意事项
- 光标的最终显示效果取决于用户的操作系统和浏览器，例如 `grab` 在 Mac 和 Windows 上的样式略有不同。
- 极少数特殊光标（如 `alias`, `cell`）在某些移动端浏览器上可能不生效（因为手机没有鼠标）。
❓ 常见问题 (FAQ)
Q: 怎么把光标变成自定义的图片？
A: CSS 允许使用 `cursor: url('image.png'), auto;` 来引入外部图片。建议图片尺寸不要超过 32x32 像素，否则部分浏览器会忽略。