---
title: Using URL values for the cursor property
slug: Web/CSS/cursor/url
tags:
  - Cursor
  - URL
translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
---
<p><a href="/zh-CN/docs/Gecko">Gecko</a> 1.8 (Firefox 1.5，SeaMonkey 1.0) 支持CSS的URL值 {{cssxref("cursor")}} 属性在Windows和Linux。Mac支持是在Gecko 2（Firefox 4）中添加的。这允许将任意图像指定为鼠标光标 - 可以使用Gecko支持的任何图像格式。</p>

<h2 id=".E8.AF.AD.E6.B3.95" name=".E8.AF.AD.E6.B3.95">语法</h2>

<p>此属性的基本（CSS 2.1）语法是：</p>

<pre class="syntaxbox">cursor: [&lt;url&gt;,]* keyword;
</pre>

<p>这意味着可以指定零个或多个URL（逗号分隔），后面必须跟随CSS规范中定义的一个关键字，例如 auto或 pointer。</p>

<p>例如，将允许以下值：</p>

<pre class="brush:css;auto-links:false;">cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
</pre>

<p>首先尝试加载 foo.cur。如果文件不存在或者其它无效原因，bar.gif被尝试加载，如果bar.gif不能被加载，那么使用<code>auto</code>。</p>

<p>在Gecko 1.8beta3 (Deer Park Alpha 2)中加入了对<a href="/zh-CN/docs/CSS3">CSS3</a> <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">语法</a>的指针属性的支持。</p>

<pre><code>cursor:  [&lt;uri&gt; [&lt;x&gt; &lt;y&gt;]?,]* keyword</code></pre>

<p>因此，它能在Firefox 1.5中工作。它允许定义指针的热点，加强对指针图橡的边界的控制。如果一个也没有设置，指针的热点会从文件本身读取（适合CUR和XBM文件类型）。否则，设置成图像的左上角。一个CSS3语法的例子：</p>

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

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

/*
fallsback onto 'auto' and 'pointer' in IE,
but must be set separately
*/</code></pre>

<p>第一个数字是X坐标，第二个数字是Y坐标。该示例将热点设置为从左上角（0,0）到（4,12）处的像素。</p>

<h2 id=".E5.B1.80.E9.99.90.E6.80.A7" name=".E5.B1.80.E9.99.90.E6.80.A7">局限性</h2>

<p>可以使用任何被Gecko所支持的图像格式。这意味着你可以使用BMP，JPG，CUR，GIF等等。可是，ANI不被支持。还有即使你定义一个GIF动画，指针也不会变成GIF动画。这个局限性可能在以后的版本去掉。</p>

<p>Gecko它本身不能限制被替换的指针大小。无论如何，你应该自己限制图像的最大值在32x32，以便兼容各种平台的操作系统。尤其是大于这个尺寸的指针不能在Windows 9x (95，98，ME）下工作。</p>

<p>透明效果的指针在Windows XP以前都不被支持。这是操作系统的一个局限性。透明效果可以在所有平台下工作。</p>

<p>只 有Windows，OS/2和Linux（使用Gtk+ 2.4及更高版本）的Mozilla版本支持光标属性的URL参数。其它版本可能在以后的版本中加入支持(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})。</p>

<h2 id=".E5.85.B3.E4.BA.8E.E5.85.B6.E5.AE.83.E6.B5.8F.E8.A7.88.E5.99.A8.E7.9A.84.E5.85.BC.E5.AE.B9.E6.80.A7" name=".E5.85.B3.E4.BA.8E.E5.85.B6.E5.AE.83.E6.B5.8F.E8.A7.88.E5.99.A8.E7.9A.84.E5.85.BC.E5.AE.B9.E6.80.A7">关于其它浏览器的兼容性</h2>

<p>Microsoft Internet Explorer 6.0还支持cursor属性的URI值。然而：</p>

<ul>
 <li>IE只支持CUR和ANI格式。</li>
 <li>IE不支持带有x和y坐标的CSS 3语法。将忽略光标图像和属性的其余部分。</li>
</ul>

<table>
 <tbody>
  <tr>
   <th>Browser</th>
   <th>Lowest version</th>
   <th>formats (e.g.)</th>
   <th>x-y-coordinates</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td><strong>6.0</strong></td>
   <td><code>.cur | .ani</code></td>
   <td>---</td>
  </tr>
  <tr>
   <td>Firefox (Gecko), Windows and Linux</td>
   <td><strong>1.5</strong> (1.8)</td>
   <td><code>.cur | .png | .gif | .jpg</code></td>
   <td>1.5 (1.8)</td>
  </tr>
  <tr>
   <td>Firefox (Gecko)</td>
   <td><strong>4.0</strong> (2.0)</td>
   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
   <td>(Gecko 2.0)</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td rowspan="2">Safari (Webkit)</td>
   <td><strong>3.0</strong> (522-523)</td>
   <td><code>.cur | .png | .gif | .jpg</code></td>
   <td rowspan="2">3.0 (522-523)</td>
  </tr>
  <tr>
   <td colspan="2">Since OS X 10.5 supports Safari (Mac)<code> .cur</code>files</td>
  </tr>
 </tbody>
</table>

<p>它也使用不严格的光标属性语法。例如像这样的参数：</p>

<pre class="brush:css">cursor: url(foo.cur);
</pre>

<p>或者：</p>

<pre class="brush:css">cursor: url(foo.cur), pointer, url(bar.cur), auto;
</pre>

<p>可以在MSIE上工作，但是不能在Gecko上面工作。因为Gecko的兼容性与CSS的规范一致，URIs表始终放置在前面，在最后放置正确的关键字。</p>

<p> </p>