200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 【CSS: cursor】鼠标光标指针样式大全

【CSS: cursor】鼠标光标指针样式大全

时间:2023-06-24 08:13:27

相关推荐

【CSS: cursor】鼠标光标指针样式大全

浏览器内置指针样式:

标了红色 * 号的为我认为的常用指针样式。

其他属性:

/* 全局属性 */cursor: inherit;cursor: initial;cursor: unset;

url() : 自定义鼠标指针!

除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式!

/* 使用 URL,并提供一个关键字值作为备用 */cursor: url(hand.cur), pointer;/* URL 和 xy 的坐标偏移值,最后提供一个关键字值作为备用 */cursor: url(cursor1.png) 4 12, auto;cursor: url(cursor2.png) 2 2, pointer;

cursor 属性为零个或多个<url>值,多个url()的时候它们之间用逗号分隔,最后必填一个cursor的关键字值。每个<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像,如果无法加载则继续加载下一个图像,如果都无法加载图像或未指定图像,则使用关键字值代表的指针类型。

每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置),位置相对于图标的左上角。

多 `url()` 例子:

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>

url(…)或者逗号分隔的url(…), url(…), …,指向图片文件。用大于一个<url>值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。

<x><y>

可选 x,y 坐标。两个小于 32 的无单位非负数。

自定义、定制鼠标指针例子:

【css】自定义鼠标光标指针样式-前端_oumae-kumiko的博客-CSDN博客

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。