CSS User Interface: Using URL values for the cursor property
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(?developer/section/1072235/foo.cur), url(http://www.example.com/bar.gif), auto;这将首先尝试加载?developer/section/1072235/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(?developer/section/1072235/cursor1.png) 4 12, auto;
}
.bar {
cursor: pointer;
cursor: url(?developer/section/1072235/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语法.。光标图像和属性的其余部分将被忽略。
Browser | Lowest version | formats (e.g.) | x-y-coordinates |
|---|---|---|---|
Internet Explorer | 6.0 | .cur | .ani | |
Firefox (Gecko), Windows and Linux | 1.5 (1.8) | .cur | .png | .gif | .jpg | 1.5 (1.8) |
Firefox (Gecko) | 4.0 (2.0) | .cur | .png | .gif | .jpg | .svg | (Gecko 2.0) |
Opera | |||
Safari (Webkit) | 3.0 (522-523) | .cur | .png | .gif | .jpg | 3.0 (522-523) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
