本文功能介绍:自定义、定制鼠标光标指针样式!
cursor: url(), auto;
除了浏览器提供的鼠标样式,我们还可以借助 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 坐标。值为小于等于 图片像素值 的无单位非负数。x 是向左偏移,y 是向上偏移!
实战:
html {
cursor: url('./err.xxx') 0 0, url('./mb.svg') 10 10, pointer;
}
注意事项:
1、支持的图像文件类型:png、svg、ico、jpg等。【按理来说`url()`支持的都能使用,自行额外测试】
2、图像文件的像素不得超过32px。当初不知道为啥这么写,反正现在再回过头来看是可以大于32。
3、最后必填一个cursor的关键字值。
4、url() 和 cursor关键字值都必须要有逗号分隔。
5、 x,y 坐标是两个小于等于 图片像素值 的无单位非负数。x 是向左偏移,y 是向上偏移!
url() 函数
URL 可以使用单引号或双引号包含,也可以直接书写。可以在此函数中使用相对地址。