31、CSS 样式：光标与背景设置全解析

CSS 样式：光标与背景设置全解析

1. 光标属性（cursor）

光标属性允许我们控制鼠标指针悬停在元素上时显示的光标样式。以下是其属性值及相关说明：
| 属性 | 值 |
| — | — |
| cursor | [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
| 初始值 | auto |

该属性可以接受自定义光标的引用（使用 <uri> 表示法），也可以提供多个 URL，用逗号分隔。还可以使用关键字来更改光标样式。例如：

div {
    cursor: move;
    border: thin solid black;
    width: 100px;
    height: 100px;
}

当鼠标悬停在 <div> 元素上时，光标会变为带有箭头的十字线。

以下是常见光标关键字及其对应的光标样式：
| 光标关键字 | 光标图像 |
| — | — |
| crosshair | - |
| pointer | - |
| move | - | <