CSS User Interface: Using URL values for the cursor property

CSS用户界面：为游标属性使用URL值

Gecko 1.8（Firefox 1.5，SeaMonkey 1.0）cursor在Windows和Linux上支持CSS 属性的URL值。在Gecko 2（Firefox 4）中添加了Mac支持。这允许指定任意图像作为鼠标光标 - 可以使用Gecko支持的任何图像格式。

语法

这个属性的基本（CSS 2.1）语法是：

cursor:  [<url>,]* keyword

这意味着可以指定零个或多个URL（用逗号分隔），这些URL 必须跟在CSS规范中定义的关键字之一，比如autoor pointer。

例如，将允许以下值：

cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;

这将首先尝试加载foo.cur。如果该文件不存在或者由于某种其他原因而无效，则尝试bar.gif，如果该文件不能被使用，auto则将被使用。

在Gecko 1.8（Firefox 1.5）中添加了对游标值的CSS 3语法的支持：

cursor:  [<uri> [<x> <y>]?,]* keyword

它允许指定光标热点的坐标，该热点将被限制在光标图像的边界。如果没有指定，则从文件本身（用于CUR和XBM文件）读取热点的坐标，或者将其设置为图像的左上角。CSS3语法的一个例子是：

.foo  {
  cursor:  auto;
  cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
  cursor:  pointer;
  cursor:  url(cursor2.png) 2 2, pointer;
} 

/* falls back onto 'auto' and 'pointer' in IE, but must be set separately */

第一个数字是x坐标，第二个数字是y坐标。这个例子将热点设置为从左上角（0,0）开始的（4,12）处的像素。

局限性

可以使用Gecko支持的所有图像格式。这意味着你可以使用PNG，GIF，JPG，BMP，CUR等图像。ANI不受支持。动画PNG或GIF不会创建动画光标。

注：从Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）开始，Gecko还支持游标的SVG图像格式。但是，SVG图像的根节点上必须包含长度值（不是百分比值）的高度和宽度SVG。SVG图像中的JavaScript，CSS动画和声明式SMIL将被忽略; 例如，您不能使用SVG创建动画光标。

在Gecko（Firefox）中，光标大小的限制是128×128像素。较大的光标图像被忽略。但是，为了与操作系统和平台保持最大的兼容性，您应该将自己限制为32×32的大小。

（由于Gecko 1.9.2-1.9.2.6中的一个bug，Windows上的Firefox 3.6-3.6.6限制为32x32px，这在更高版本中已经修复。）

XP之前的Windows版本不支持半透明游标。这是操作系统的限制。透明度适用于所有平台。

在Windows，OS / 2和Linux（使用GTK + 2.4或更高版本）的Mozilla版本中支持作为游标的URL值。Gecko 2（Firefox 4）增加了Mac OS X支持。

与其他浏览器的兼容性

Microsoft Internet Explorer 6.0也支持该cursor属性的URI值。然而：

• IE只支持CUR和ANI格式。

• IE不支持x和y坐标的CSS 3语法.。光标图像和属性的其余部分将被忽略。