文章目录
鼠标样式：cursor属性值（含自定义光标图案） - 代码篇
1. 常用取值 · 举例：
| 属性值 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ··· |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
cursor: | Auto | text | Crosshair | cell | Default | Pointer | Move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | wait | help | ··· |
效果截图 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | 看下文 |
2. 更多取值 · 截图参考 （部分图标显示，因电脑系统而异）：
对应解释 · 如下表所示：
3. 自定义cursor图片：
body {cursor: url(https://static.xxxx.com/css/default.cur),default;
}
a, button, img {cursor: url(https://static.xxxx.com/css/pointer.cur),default;
}
附：demo.html 效果查看
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title> cursor属性值（光标图案）</title>
</head>
<body><p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><span style="cursor:auto">Auto</span><br /><span style="cursor:crosshair">Crosshair</span><br /><span style="cursor:default">Default</span><br /><span style="cursor:pointer">Pointer</span><br /><span style="cursor:move">Move</span><br /><span style="cursor:e-resize">e-resize</span><br /><span style="cursor:ne-resize">ne-resize</span><br /><span style="cursor:nw-resize">nw-resize</span><br /><span style="cursor:n-resize">n-resize</span><br /><span style="cursor:se-resize">se-resize</span><br /><span style="cursor:sw-resize">sw-resize</span><br /><span style="cursor:s-resize">s-resize</span><br /><span style="cursor:w-resize">w-resize</span><br /><span style="cursor:text">text</span><br /><span style="cursor:wait">wait</span><br /><span style="cursor:help">help</span>
</body>
</html>
以上就是关于“ cursor光标图案 - 代码篇 ” 的全部内容。
