鼠标样式：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. 自定义cursor图片：

body {cursor: url(https://static.xxxx.com/css/default.cur),default;
}
a, button, img {cursor: url(https://static.xxxx.com/css/pointer.cur),default;
}

附：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光标图案 - 代码篇 ” 的全部内容。

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇相关推荐

html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置
CSS鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式. 一般在网页中一些特殊版块布局时,会遇到这类需求,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cur ...
CSS 鼠标样式 cursor属性
在浏览网页时,通常看到的鼠标光标形状有箭头.手形.沙漏等,而在 windows 中实际看到的鼠标指针种类比这个还要多. 一般情况下,鼠标光标的形状由浏览器负责控制,大多数情况的光标形状为箭头形状,当指 ...
python中tkinter较完整的鼠标样式cursor值
什么是cursor cursor是指(计算机荧光屏上的)光标,游标; 在tkinter中的Frame, Label, Button, Radiobutton, Checkbutton, Entry, ...
1218 鼠标样式 cursor
1218 鼠标样式 cursor 示例代码 .p1{cursor: default;}.p2{cursor: pointer;}.p3{cursor: move;}.p4{cursor: text;} ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇
文章目录 qs序列化:是什么?为什么?怎么办?`实例截图参考` 一.`(简单了解)` · `三步解析 ` 序列化是一种用来处理对象流的机制: 对象.文件.数据,有许多不同的格式,很难统一传输和保存序 ...
CSS系列之鼠标样式 cursor
文章の目录 1.属性值 2.注意点 3.示例写在最后 cursor 属性设置光标的类型(如果有),在鼠标指针悬停在元素上时显示相应样式. 1.属性值 <url> url(-)或者逗号分隔 ...
鼠标样式(cursor)
css学习地址: http://www.dreamdu.com/css/property_cursor/ cursor -- 定义鼠标样式取值: [ [<uri> ,]* [ auto ...
html鼠标手状态,css鼠标样式cursor介绍(鼠标手型)
CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例子:文本或其它页面元素文本或其它页面元素注意把 * 换成如下15个效果的一种: 下面是对这15 ...

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇

文章目录

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇

1. 常用取值 · 举例：

2. 更多取值 · 截图参考 `（部分图标显示，因电脑系统而异）`：

3. 自定义cursor图片：

附：demo.html 效果查看

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇相关推荐

最新文章

热门文章

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇

文章目录

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇

1. 常用取值 · 举例：

2. 更多取值 · 截图参考 （部分图标显示，因电脑系统而异）：

3. 自定义cursor图片：

附：demo.html 效果查看

鼠标样式：cursor属性值（含自定义光标图案） - 代码篇相关推荐

最新文章

热门文章

2. 更多取值 · 截图参考 `（部分图标显示，因电脑系统而异）`：