diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/css/cursor | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/css/cursor')
-rw-r--r-- | files/zh-cn/web/css/cursor/url/index.html | 125 |
1 files changed, 0 insertions, 125 deletions
diff --git a/files/zh-cn/web/css/cursor/url/index.html b/files/zh-cn/web/css/cursor/url/index.html deleted file mode 100644 index fcde4cecb2..0000000000 --- a/files/zh-cn/web/css/cursor/url/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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: [<url>,]* 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: [<uri> [<x> <y>]?,]* 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> |