cursor属性值(光标图案) - 代码篇

cursor属性值(光标图案) - 代码篇


1. 常用取值 · 举例:

属性值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ···
cursor: Auto text Crosshair cell Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize wait help ···
效果截图 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 看下文

2. 更多取值 · 截图参考 (部分图标显示,因电脑系统而异)

在这里插入图片描述
对应解释 · 如下表所示:

在这里插入图片描述


3. demo.html 效果查看

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8"> 
	<title> cursor属性值(光标图案)</title> 
</head>
<body>
	<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
	<span style="cursor:auto">Auto</span><br />
	<span style="cursor:crosshair">Crosshair</span><br />
	<span style="cursor:default">Default</span><br />
	<span style="cursor:pointer">Pointer</span><br />
	<span style="cursor:move">Move</span><br />
	<span style="cursor:e-resize">e-resize</span><br />
	<span style="cursor:ne-resize">ne-resize</span><br />
	<span style="cursor:nw-resize">nw-resize</span><br />
	<span style="cursor:n-resize">n-resize</span><br />
	<span style="cursor:se-resize">se-resize</span><br />
	<span style="cursor:sw-resize">sw-resize</span><br />
	<span style="cursor:s-resize">s-resize</span><br />
	<span style="cursor:w-resize">w-resize</span><br />
	<span style="cursor:text">text</span><br />
	<span style="cursor:wait">wait</span><br />
	<span style="cursor:help">help</span>
</body>
</html>

以上就是关于“ cursor光标图案 - 代码篇 ” 的全部内容。

发布了501 篇原创文章 · 获赞 194 · 访问量 144万+

猜你喜欢

转载自blog.csdn.net/qq_35393869/article/details/105383681