css3中cursor屬性怎么改變光標(biāo)的形狀

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

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

　　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屬性僅對(duì)具有指針設(shè)備（如鼠標(biāo)）的設(shè)備有效；它對(duì)觸控設(shè)備沒有任何影響。

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

　　下面我們來看看cursor屬性的這些屬性值可以設(shè)置怎樣的光標(biāo)形狀。

　　圖像游標(biāo)（自定義游標(biāo)）

　　<URI>：

　　一個(gè)或多個(gè)逗號(hào)分隔的url()用來指向要用作光標(biāo)的圖像。用戶代理從第一個(gè)中檢索游標(biāo)url()。如果用戶代理無法處理游標(biāo)列表的第一個(gè)游標(biāo)，則必須嘗試處理游標(biāo)列表等。如果用戶代理無法處理任何提供的圖像（請(qǐng)參閱瀏覽器支持），則必須使用游標(biāo)關(guān)鍵字。列表的末尾?？蛇x的<x>和<y>坐標(biāo)標(biāo)識(shí)圖像中指針位置（即熱點(diǎn)）的確切位置。

　　必須在回退列表的末尾提供非URL標(biāo)準(zhǔn)游標(biāo)關(guān)鍵字。

　　<x><y>：

　　使用小于32的無單位數(shù)字，不允許使用負(fù)值。這些值指定光標(biāo)熱點(diǎn)的坐標(biāo)。第一個(gè)數(shù)字是x坐標(biāo)，第二個(gè)數(shù)字是y坐標(biāo)。

　　例：

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

　　下面我們來看看圖像游標(biāo)的示例：

　　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;

　　}

　　通用光標(biāo)（箭頭狀）

　　default：默認(rèn)光標(biāo)，通常箭頭。

　　auto：根據(jù)當(dāng)前上下文確定要顯示的光標(biāo)。例如，text當(dāng)文本懸停時(shí)顯示。

　　none：不為元素呈現(xiàn)光標(biāo)顯示光標(biāo)。

　　例：

　　.auto{

　　cursor:auto;

　　}

　　.default{

　　cursor:default;

　　}

　　.none{

　　cursor:none;

　　}

　　1.gif

　　鏈接和狀態(tài)游標(biāo)

　　context-menu：光標(biāo)下的對(duì)象可以使用上下文菜單。通常呈現(xiàn)為箭頭，旁邊有一個(gè)類似菜單的小圖形。

　　只有IE10及更高版本在Windows上實(shí)現(xiàn)了這一功能。

　　help：此光標(biāo)通常呈現(xiàn)為問號(hào)或氣球。它表示光標(biāo)下的對(duì)象可以使用幫助。

　　pointer：光標(biāo)是指示鏈接的指針。

　　progress：進(jìn)度指標(biāo)。表示程序正在執(zhí)行某些處理，但不同之處wait在于用戶仍可以與程序進(jìn)行交互。通常呈現(xiàn)為旋轉(zhuǎn)的沙灘球，或帶有手表或沙漏的箭頭。

　　wait：此光標(biāo)通常呈現(xiàn)為手表或沙漏。它表示程序正忙，用戶應(yīng)該等待。

　　例：

　　.context-menu{

　　cursor:context-menu;

　　}

　　.help{

　　cursor:help;

　　}

　　.pointer{

　　cursor:pointer;

　　}

　　.progress{

　　cursor:progress;

　　}

　　.wait{

　　cursor:wait;

　　}

　　2.gif

　　選擇光標(biāo)

　　cell：此光標(biāo)通常呈現(xiàn)為粗加號(hào)，中間有一個(gè)點(diǎn)。它表示可以選擇一個(gè)單元或一組單元。

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

　　text：

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

　　vertical-text：該光標(biāo)通常呈現(xiàn)為水平工字梁。它表示可以選擇的垂直文本。

　　例：

　　.cell{

　　cursor:cell;

　　}

　　.crosshair{

　　cursor:crosshair;

　　}

　　.text{

　　cursor:text;

　　}

　　.vertical-text{

　　cursor:vertical-text;

　　}

　　3.gif

　　拖放光標(biāo)

　　alias：此光標(biāo)通常呈現(xiàn)為箭頭，旁邊有一個(gè)小彎曲箭頭。它表示要?jiǎng)?chuàng)建的某個(gè)別名/快捷方式。

　　copy：此光標(biāo)通常呈現(xiàn)為箭頭，旁邊有一個(gè)小加號(hào)。它表明要復(fù)制的東西。

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

　　no-drop：此光標(biāo)通常呈現(xiàn)為手形或指針，帶有一個(gè)小圓圈，并帶有一條直線。它表示無法在當(dāng)前光標(biāo)位置刪除拖動(dòng)的項(xiàng)目。

　　not-allowed：此光標(biāo)通常呈現(xiàn)為一個(gè)圓圈，并帶有一條直線。它表示不會(huì)執(zhí)行請(qǐng)求的操作。

　　例：

　　.alias{

　　cursor:alias;

　　}

　　.copy{

　　cursor:copy;

　　}

　　.move{

　　cursor:move;

　　}

　　.no-drop{

　　cursor:no-drop;

　　}

　　.not-allowed{

　　cursor:not-allowed;

　　}

　　4.gif

　　縮放光標(biāo)：

　　zoom-in（放大）、zoom-out（縮?。?/p>

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

　　例：

　　.zoom-in{

　　cursor:-webkit-zoom-in;

　　cursor:zoom-in;

　　}

　　.zoom-out{

　　cursor:-webkit-zoom-out;

　　cursor:zoom-out;

　　}

　　5.gif

　　抓取光標(biāo)

　　grab、grabbing：

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

　　例：

　　.grab{

　　cursor:-webkit-grab;

　　cursor:grab;

　　}

　　.grabbing{

　　cursor:-webkit-grabbing;

　　cursor:grabbing;

　　}

　　7.gif

　　縮放和滾動(dòng)游標(biāo)

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

　　表示要移動(dòng)某些邊緣。例如，se-resize當(dāng)運(yùn)動(dòng)從開始使用光標(biāo)東南部盒子的角落。

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

　　表示雙向調(diào)整大小游標(biāo)。這些光標(biāo)類型通常在不同方向上呈現(xiàn)為雙向箭頭。

　　col-resize：

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

　　row-resize：

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

　　all-scroll：

　　此光標(biāo)通常呈現(xiàn)為向上，向下，向左和向右的箭頭，中間有一個(gè)點(diǎn)。它表示可以向任何方向滾動(dòng)某些內(nèi)容。

　　例：

　　.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屬性怎么改變光標(biāo)的形狀”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！