在css中，修改鼠标样式最核心的属性就是cursor。它决定了当用户把鼠标指针移到某个元素上方时，浏览器应该显示什么样的光标形态。无论是按钮、链接还是可拖拽区域，都可以通过设置cursor来给出明确的交互暗示。
cursor属性的基本语法
cursor属性可以直接写在css规则里，语法格式如下：
selector {
cursor: value;
}
其中value可以是css规范里定义的关键字，也可以是图片地址加备用关键字的形式。
常用的系统光标取值
下面列出一些在项目中高频使用的cursor取值：
default：默认箭头，通常不需要显式写pointer：手型，常用于可点击的链接或按钮text：文本光标，表示此处可输入或选中文字move：十字箭头，表示元素可移动not-allowed：禁止符号，表示操作不可用wait：等待圆圈，表示后台忙
通过cursor修改样式的示例
以下代码演示了如何给不同元素设置不同的鼠标样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.btn {
cursor: pointer;
}
.edit {
cursor: text;
}
.ban {
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="btn">点击我</button>
<input class="edit" placeholder="可输入">
<div class="ban">不可操作区</div>
</body>
</html>
使用自定义图片作为光标
除了系统关键字，cursor也支持使用图片文件。写法是在url()里放图片路径，后面跟一个备用关键字：
.custom-cursor {
cursor: url('https://ipipp.com/cursor.png'), auto;
}
需要注意，自定义光标图片通常有尺寸限制，多数浏览器要求不超过128x128像素，且必须提供备用关键字，防止图片加载失败时没有合理光标。
总结建议
合理运用cursor属性可以让界面更直观。普通按钮用pointer，输入框用text，禁用状态用not-allowed，能明显减少用户的理解成本。在写代码时，建议把光标样式统一归类到对应的class中，避免散落在各处难以维护。