光标(cursor属性如何改变光标的形状？（图文详解）)

光标(cursor属性如何改变光标的形状？（图文详解）)，哪吒游戏网给大家带来详细的光标(cursor属性如何改变光标的形状？（图文详解）)介绍，大家可以阅读一下，希望这篇光标(cursor属性如何改变光标的形状？（图文详解）)可以给你带来参考价值。

本篇文章给大家带来的内容是介绍cursor属性改变光标形状的方法，让大家了解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; }

链接和状态游标

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; }

选择光标

cell：此光标通常呈现为粗加号，中间有一个点。它表示可以选择一个单元或一组单元。

crosshair：简单的十字准线（例如，类似于“+”符号的短线段）。通常用于表示二维位图选择模式。

text：

该光标通常呈现为垂直工字梁。用户代理可以自动显示vertical-text垂直文本的水平工字梁/光标（例如与关键字相同），或者就此而言，任何角度的工字梁/光标用于以任何特定角度渲染的文本。它表示可以选择的文本。

vertical-text：该光标通常呈现为水平工字梁。它表示可以选择的垂直文本。

例：

.cell{ cursor:cell; } .crosshair{ cursor:crosshair; } .text{ cursor:text; } .vertical-text{ cursor:vertical-text; }

拖放光标

alias：此光标通常呈现为箭头，旁边有一个小弯曲箭头。它表示要创建的某个别名/快捷方式。

copy：此光标通常呈现为箭头，旁边有一个小加号。它表明要复制的东西。

move：表示要移动的东西。渲染此光标的方式取决于浏览器，如上面的描述中所述。它通常呈现为四向箭头或类似手的形状。

no-drop：此光标通常呈现为手形或指针，带有一个小圆圈，并带有一条直线。它表示无法在当前光标位置删除拖动的项目。

总结：以上内容就是针对光标(cursor属性如何改变光标的形状？（图文详解）)详细阐释，如果您觉得有更好的建议可以提供给哪吒游戏网小编，光标(cursor属性如何改变光标的形状？（图文详解）)部分内容转载自互联网，有帮助可以收藏一下。