CSS 如何设置指示任何方向滚动的光标样式

在进入主题之前，让我们先理解光标作为用户界面元素的重要性。我们知道，用户在网站上与之互动的第一件事往往是光标，这就是为什么操纵光标样式和效果对于设计非常重要的原因，因为它极大地影响了整体用户体验。

光标属性用于在悬停在元素上时设置鼠标光标的外观。它适用于所有元素，并且是可继承的，这意味着子元素也将具有与其父元素相同的光标。

计算的值可以是绝对值或指定值，这取决于属性值中是否使用URL。它具有离散的动画样式。
通过为光标图像提供一个或多个逗号分隔的URL来指定，但必须具有回退关键字值。
在样式化时，浏览器尝试加载由URL指定的图像，如果加载图像时存在错误，那么光标会回退并使用关键字值。

可选地，我们还可以在URL之后以空格分隔的两个数字来指定光标热点的x和y坐标，这是相对于图像的左上角而言的。

现在让我们简要了解每一个值。

url(s) - 这是一个可选值，其中包含我们想要作为光标的图像文件的源位置。如果我们有多个用于回退的光标，我们还可以通过指定逗号分隔的URL列表来指定更多图像。
X和Y - 这些也是可选的数值，指向正在指向的光标内准确位置；光标热点。这些数字实际上是指向像素大小的，并且在光标图像的限制范围内夹紧，并相对于图像的左上角，对应于“0 0”。
关键字值 - 这是此属性必须具有的值，它指定了我们要使用的光标的类型或在图像加载失败时要使用的光标。我们可以使用许多可用的关键字值，例如auto，default，none，help，wait，crosshair等。

使用all-scroll属性

到目前为止，我们已经了解了光标属性及其可能的值。那么，问题是，哪个关键字值将将光标设置为任何方向滚动。答案是“all-scroll”。all-scroll属性值用于我们希望在任何方向上滚动的元素。

示例

以下是使用all-scroll关键字值将光标样式设置为任何方向滚动的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      #all-scrollValue {
         color: brown;
         cursor: all-scroll;
      }
   </style>
</head>
<body>
   <h1>Using all scroll property to change cursor</h1>
   <h2 id="all-scrollValue">
      Hover over this text to see the cursor change to any-direction scroll.
   </h2>
</body>
</html>

使用move属性值

根据bug 275174所述，all-cursor属性值在Windows中与move属性值相同。因此，Windows用户也可以使用move属性值来设置任意方向的滚动。

示例

下面是使用move属性值进行任意方向滚动光标的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      #all-scrollValue {
         color: brown;
         cursor: all-scroll;
      }
      #movePropertyValue {
         color: crimson;
         cursor: move;
      }
   </style>
</head>
<body>
   <h1>Using all scroll property to change cursor</h1>
   <h2 id="all-scrollValue">
      Hover over this text to see the cursor change to any-direction scroll.
   </h2>
   <h2 id="movePropertyValue">
      Hover over to see the effect of move property value.
   </h2>
</body>
</html>