鼠标样式：cursor属性值（含自定义光标图案） - 代码篇

草巾冒小子

已于 2025-03-31 22:02:35 修改

阅读量4.1k

点赞数 2

分类专栏： CSS 3 文章标签： css html5 python

于 2020-04-08 14:28:26 首次发布

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/105383681

版权

本文详细介绍了CSS中Cursor属性的使用，包括常见预定义光标、方向调整光标及自定义光标图片设置，通过实例展示了如何改变网页元素的鼠标样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇

鼠标样式：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;
}