css3中cursor屬性怎么改變光標的形狀

這篇文章主要為大家展示了“css3中cursor屬性怎么改變光標的形狀”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css3中cursor屬性怎么改變光標的形狀”這篇文章吧。

　　首先我們來看看cursor屬性是如何改變光標形狀的。

　　css3cursor屬性的基本語法：

　　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、cursor屬性適用于所有元素；

　　2、cursor屬性僅對具有指針設備（如鼠標）的設備有效；它對觸控設備沒有任何影響。

　　3、并非所有瀏覽器都支持cursor屬性的所有屬性值，且所有屬性值在所有瀏覽器和操作系統中顯示的效果不一定相同。

　　下面我們來看看cursor屬性的這些屬性值可以設置怎樣的光標形狀。

　　圖像游標（自定義游標）

　　<URI>：

　　一個或多個逗號分隔的url()用來指向要用作光標的圖像。用戶代理從第一個中檢索游標url()。如果用戶代理無法處理游標列表的第一個游標，則必須嘗試處理游標列表等。如果用戶代理無法處理任何提供的圖像（請參閱瀏覽器支持），則必須使用游標關鍵字。列表的末尾。可選的<x>和<y>坐標標識圖像中指針位置（即熱點）的確切位置。

　　必須在回退列表的末尾提供非URL標準游標關鍵字。

　　<x><y>：

　　使用小于32的無單位數字，不允許使用負值。這些值指定光標熱點的坐標。第一個數字是x坐標，第二個數字是y坐標。

　　例：

　　cursor：url（some-cursor.png）215，pointer;

　　下面我們來看看圖像游標的示例：

　　css代碼：

　　.custom{

　　cursor:url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png),url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur),pointer;

　　}

　　通用光標（箭頭狀）

　　default：默認光標，通常箭頭。

　　auto：根據當前上下文確定要顯示的光標。例如，text當文本懸停時顯示。

　　none：不為元素呈現光標顯示光標。

　　例：

　　.auto{

　　cursor:auto;

　　}

　　.default{

　　cursor:default;

　　}

　　.none{

　　cursor:none;

　　}

　　1.gif

　　鏈接和狀態游標

　　context-menu：光標下的對象可以使用上下文菜單。通常呈現為箭頭，旁邊有一個類似菜單的小圖形。

　　只有IE10及更高版本在Windows上實現了這一功能。

　　help：此光標通常呈現為問號或氣球。它表示光標下的對象可以使用幫助。

　　pointer：光標是指示鏈接的指針。

　　progress：進度指標。表示程序正在執行某些處理，但不同之處wait在于用戶仍可以與程序進行交互。通常呈現為旋轉的沙灘球，或帶有手表或沙漏的箭頭。

　　wait：此光標通常呈現為手表或沙漏。它表示程序正忙，用戶應該等待。

　　例：

　　.context-menu{

　　cursor:context-menu;

　　}

　　.help{

　　cursor:help;

　　}

　　.pointer{

　　cursor:pointer;

　　}

　　.progress{

　　cursor:progress;

　　}

　　.wait{

　　cursor:wait;

　　}

　　2.gif

　　選擇光標

　　cell：此光標通常呈現為粗加號，中間有一個點。它表示可以選擇一個單元或一組單元。

　　crosshair：簡單的十字準線（例如，類似于“+”符號的短線段）。通常用于表示二維位圖選擇模式。

　　text：

　　該光標通常呈現為垂直工字梁。用戶代理可以自動顯示vertical-text垂直文本的水平工字梁/光標（例如與關鍵字相同），或者就此而言，任何角度的工字梁/光標用于以任何特定角度渲染的文本。它表示可以選擇的文本。

　　vertical-text：該光標通常呈現為水平工字梁。它表示可以選擇的垂直文本。

　　例：

　　.cell{

　　cursor:cell;

　　}

　　.crosshair{

　　cursor:crosshair;

　　}

　　.text{

　　cursor:text;

　　}

　　.vertical-text{

　　cursor:vertical-text;

　　}

　　3.gif

　　拖放光標

　　alias：此光標通常呈現為箭頭，旁邊有一個小彎曲箭頭。它表示要創建的某個別名/快捷方式。

　　copy：此光標通常呈現為箭頭，旁邊有一個小加號。它表明要復制的東西。

　　move：表示要移動的東西。渲染此光標的方式取決于瀏覽器，如上面的描述中所述。它通常呈現為四向箭頭或類似手的形狀。

　　no-drop：此光標通常呈現為手形或指針，帶有一個小圓圈，并帶有一條直線。它表示無法在當前光標位置刪除拖動的項目。

　　not-allowed：此光標通常呈現為一個圓圈，并帶有一條直線。它表示不會執行請求的操作。

　　例：

　　.alias{

　　cursor:alias;

　　}

　　.copy{

　　cursor:copy;

　　}

　　.move{

　　cursor:move;

　　}

　　.no-drop{

　　cursor:no-drop;

　　}

　　.not-allowed{

　　cursor:not-allowed;

　　}

　　4.gif

　　縮放光標：

　　zoom-in（放大）、zoom-out（縮小）：

　　表示某些內容可以放大或縮小，并且通常在玻璃中心呈現為帶有“+”或“-”的放大鏡。

　　例：

　　.zoom-in{

　　cursor:-webkit-zoom-in;

　　cursor:zoom-in;

　　}

　　.zoom-out{

　　cursor:-webkit-zoom-out;

　　cursor:zoom-out;

　　}

　　5.gif

　　抓取光標

　　grab、grabbing：

　　表示可以抓取元素（拖動以移動）。grab是一只開放的手“準備拖動”，并且dragging是一只看起來像抓住東西的“閉合”手。

　　例：

　　.grab{

　　cursor:-webkit-grab;

　　cursor:grab;

　　}

　　.grabbing{

　　cursor:-webkit-grabbing;

　　cursor:grabbing;

　　}

　　7.gif

　　縮放和滾動游標

　　e-resize，n-resize，ne-resize，nw-resize，s-resize，se-resize，sw-resize，w-resize

　　表示要移動某些邊緣。例如，se-resize當運動從開始使用光標東南部盒子的角落。

　　ew-resize，ns-resize，nesw-resize，nwse-resize

　　表示雙向調整大小游標。這些光標類型通常在不同方向上呈現為雙向箭頭。

　　col-resize：

　　此光標通常呈現為左右箭頭，并用垂直條分隔它們。它表示可以水平調整項目/列的大小。它類似于您在MSExcel等程序中看到的光標。

　　row-resize：

　　此光標通常呈現為向上和向下的箭頭，水平條將它們分開。它表示可以垂直調整項目/行的大小。它類似于您在MSExcel等程序中看到的光標。

　　all-scroll：

　　此光標通常呈現為向上，向下，向左和向右的箭頭，中間有一個點。它表示可以向任何方向滾動某些內容。

　　例：

　　.n-resize{

　　cursor:n-resize;

　　}

　　.ne-resize{

　　cursor:ne-resize;

　　}

　　.e-resize{

　　cursor:e-resize;

　　}

　　.se-resize{

　　cursor:se-resize;

　　}

　　.s-resize{

　　cursor:s-resize;

　　}

　　.sw-resize{

　　cursor:sw-resize;

　　}

　　.w-resize{

　　cursor:w-resize;

　　}

　　.nw-resize{

　　cursor:nw-resize;

　　}

　　.se-resize{

　　cursor:se-resize;

　　}

　　.ew-resize{

　　cursor:ew-resize;

　　}

　　.ns-resize{

　　cursor:ns-resize;

　　}

　　.nesw-resize{

　　cursor:nesw-resize;

　　}

　　.nwse-resize{

　　cursor:nwse-resize;

　　}

　　.col-resize{

　　cursor:col-resize;

　　}

　　.row-resize{

　　cursor:row-resize;

　　}

　　.all-scroll{

　　cursor:all-scroll;

　　}

以上是“css3中cursor屬性怎么改變光標的形狀”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！