默认光标 CSS

在网页设计中，光标不只是一个简单的工具，它也能帮助提示用户，让他们更好地理解网页。在 Web 开发中，我们可以使用 CSS 来设置光标的样式。

在默认情况下，浏览器会显示默认光标，这通常是箭头形状的光标。但是，有时候我们希望根据特定交互改变光标的形状以提示用户。CSS 光标属性可以用来实现这个目的。具体来说，CSS 光标属性用于设置光标的类型。

CSS 光标基础

CSS 光标属性共有 12 种取值，分别为：

• auto: 浏览器自动选择光标。
• default: 浏览器默认光标，通常是箭头。
• none: 没有光标。
• context-menu: 上下文菜单光标。
• help: 帮助光标。
• pointer: 指针光标，表示链接。
• progress: 进度条光标。
• wait: 等待光标。
• cell: 单元格光标。
• crosshair: 十字准星光标。
• text: 文本输入光标。
• vertical-text: 垂直的文本输入光标。

使用方式非常简单，只需要将光标属性设置成你要的值即可：

.my-class {
  cursor: pointer;
}

自定义光标

除了默认光标，CSS 也支持自定义光标。你可以通过使用 url 值来指定一个图像作为光标。

.my-class {
  cursor: url('my-cursor.png'), auto;
}

在上面的示例中，我们使用 url 值指定 my-cursor.png 图像作为光标。当图像加载失败时，浏览器将显示默认光标。你可以将多个值传递给 cursor，每一个值用逗号分隔。第一个值是你自定义的光标，第二个值是浏览器失败后的备用光标。

支持度

大部分浏览器都支持 CSS 光标属性。如果你需要支持旧浏览器，你可以使用 vendor 前缀来实现。例如，Webkit 浏览器需要加上 -webkit 前缀：

.my-class {
  cursor: -webkit-grab;
  cursor: grab;
}

在上面的示例中，我们为 Webkit 浏览器添加了 -webkit 前缀。

总结

CSS 光标属性可以帮助我们更好地与用户进行交互。你可以设置默认光标，也可以自定义光标。你甚至可以根据交互更改光标类型以提示用户。无论怎样，使用 CSS 光标属性始终很简单。

以上为默认光标 CSS 的介绍。