css的cursor屬性是什麼？ cursor屬性的使用

這篇文章帶給大家的內容是介紹css的cursor屬性是什麼？ cursor屬性的使用。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先我們來了解cursor屬性是什麼？有什麼作用？

cursor屬性是css中的遊標屬性，它指定當滑鼠位於應用元素上時可以使用的滑鼠遊標類型，即：規定要顯示的遊標的類型（形狀）。

我們可以透過cursor屬性將遊標設定為許多預先定義遊標類型之一，或設定為映像（如下面的範例）。

附註：cursor屬性僅對具有指標裝置（如滑鼠）的裝置有效。它對觸控設備沒有任何影響。

cursor屬性用於向使用者提供視覺回饋和提示，以便在元素上傳送某種功能，對於提供更好的使用者體驗通常是重要的。

根據瀏覽器和作業系統，在CSS中定義的cursor值可以呈現不同的效果。例如，某些瀏覽器（例如​​Windows 7上的Firefox）將move（通常用於表示元素可拖曳）遊標顯示為四向箭頭，而其他瀏覽器（例如​​，在Mac OS X上的Firefox）將顯示手形遊標。在這種情況下，如果你希望遊標是一個在所有瀏覽器和平台上看起來完全相同的特定遊標，你可能需要使用圖像而不是預設的CSS關鍵字。

官方語法

#

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

初始：自動

適用於：所有元素

#動畫：沒有

新的CSS3語法：

在CSS3中，已向cursor屬性添加了其他值和選項，下面我們來看看：

cursor: [ [ <URI> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]；

說明：

1、並非所有瀏覽器都支援上述所有的值，並且並非所有值在所有瀏覽器和作業系統中看起來都相同。

2、映像遊標（自訂遊標）

#：引用圖片

#一個或多個逗號分隔的url()指向要用作遊標的影像。

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

註：必須在回退清單的末尾提供 非URL標準的遊標關鍵字。

：定義座標

使用不加單位的數值，不允許使用負值；這些值指定遊標熱點的座標。第一個數字是x座標，第二個數字是y座標。例如，以下內容：

cursor: url(some-cursor.png) 2 15, pointer;

將遊標的熱點設定為從左上角（0,0）開始的（2,15）像素。

如果未指定，則從檔案本身（對於CUR和XBM檔案）讀取熱點的座標，或將其設為映像的左上角。

我們來看一個映像遊標：

#3、常用遊標形狀

none：定義遊標不顯示

通常呈現為箭頭：default 、auto、context-menu

#通常呈現為手型：pointer、grab、grabbing，hand

help：通常呈現為問號或氣球

等待加載：progress（旋轉的沙灘球，或帶有手錶或沙漏的箭頭），wait（手錶或沙漏）

表示方向或移動：
e- resize、ne-resize 、n-resize 、nw-resize 、w-resize 、 sw-resize 、s-resize 、se-resize、ew-resize 、ns-resize、nesw-resize 、nwse-resize 、col-resize、 row-resize、、all-scroll、move

表示禁止：no-drop 、not-allowed    

瀏覽器支援

支援以下版本：

*表示必要的前綴。

總結：以上就是本篇的全部內容，大家可以自己動手編譯，看看cursor屬性的每個屬性值定義的遊標形狀。希望能對大家的學習有所幫助，更多相關影片教學推薦：css3教學！

以上是css的cursor屬性是什麼？ cursor屬性的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！