diff options
author | MDN <actions@users.noreply.github.com> | 2021-11-10 00:49:50 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-11-10 00:49:50 +0000 |
commit | d10da93ad3a7b0ffff88aa57b197b65d6f234018 (patch) | |
tree | cbc1dd3284731a8171de16252ac8e79e267fc6e6 /files/zh-cn/conflicting | |
parent | 41db9519592a8c29c6ab0864a0ccfff9c8fdce6f (diff) | |
download | translated-content-d10da93ad3a7b0ffff88aa57b197b65d6f234018.tar.gz translated-content-d10da93ad3a7b0ffff88aa57b197b65d6f234018.tar.bz2 translated-content-d10da93ad3a7b0ffff88aa57b197b65d6f234018.zip |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/conflicting')
-rw-r--r-- | files/zh-cn/conflicting/web/css/cursor/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/css/cursor/index.html b/files/zh-cn/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..fe2630c599 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/cursor/index.html @@ -0,0 +1,126 @@ +--- +title: Using URL values for the cursor property +slug: conflicting/Web/CSS/cursor +tags: + - Cursor + - URL +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: 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> |