如何自定义鼠标指针的图案？

这里着重讲的是制作自己网站的鼠标指针，我自己制作了一个简单的记事本类型的网站，自定义鼠标指针已完成，以此经验分享，先看成品图

步骤如下

1、生图

点开任何一个能生图的大模型（以豆包为例），描述想生成的鼠标指针的样式，没有想法去网上找一个自己喜欢的，截图发给豆包，让豆包”参考这个光标图像，生成好看的光标样式“，多生成几次，直到找到自己喜欢的样式，下载

2、抠图

打开任何一款免费在线抠图软件（以抠抠图为例，这个是自己收藏的免费好用的AI抠图网站）上传刚刚下载的光标图片——点击开始抠图——查看是否抠的完整干净，如果不满意，网站提供手动涂抹修改，自己改改。满意后——下载高清大图——下载PNG（鼠标指针格式最好是PNG）

3、调整图片大小

使用时要确保图片格式和大小合适（非常重要，否则鼠标会显示不出来或很大），此时在本地找到刚刚下载的PNG格式的图片，右键——用”画图“的方式打开——查看像素大小，浏览器对自定义鼠标图片有严格限制，必须小于 32x32 像素，最大不能超过 128x128 ——调整图片位置，让尖的一头在左上角位置——调整画布大小，尽可能让主体在整个画布中显得很大，让整个画布是正方形（如1376x1376像素）——保存

4、压缩

在浏览器寻找任意一款免费的在线图片压缩网站，最好是不用注册登录就能用的，免得麻烦（我用的是这个在线图片大小调整工具），上传图片——调整模式选择”按像素“——像素设为 32x32——点击”开始调整“——下载

5、图片托管

如果你想以后即便换了电脑也能继续使用这个光标样式，就将图片进行托管，点击路过图床，注册登录，上传图片

上传过后，可以看到在线链接，复制一下

6、加入代码

在你的html文件中，找到<style>标签内的body的样式，在里面添加

body {
    /* ... 其他原有代码 ... */
    
    /* 【新增/修改】使用网络链接 */
    cursor: url('刚刚复制的链接') 0 0, auto;
}

上面的代码只改变了空白处的鼠标。为了让按钮、输入框、链接上的鼠标也变成你的样式，建议在 body 后面再追加一条全局规则。

在 <style> 标签的最底部（在 </style> 之前），添加以下代码：

/* 强制所有可交互元素都使用自定义鼠标 */
a, button, input, textarea, select, .btn, .notebook-item, .note-card, .toolbar-btn, [contenteditable] {
    cursor: url('cursor.png') 0 0, pointer !important;
    /* 注意：这里把最后的 auto 改成了 pointer，因为这些都是可点击的，
       如果你的图片本身就是箭头，用 auto 也行；如果是手型，用 pointer 逻辑更顺。
       为了统一，通常保持和 body 一样即可，或者根据喜好调整。
       
       最稳妥的写法是统一用 auto，让浏览器判断：
    */
    cursor: url('刚刚复制的链接') 0 0, auto !important;
}

保存后打开网站就能看到效果