CSScursor属性设置光标样式cursor属性设置光标样式,它可以有以下的值
url 需使⽤的⾃定义光标的 URL。
注释:请在此列表的末端始终定义⼀种普通的光标,以防没有由 URL 定义的可⽤光标。
default默认光标(通常是⼀个箭头)
auto默认。浏览器设置的光标。
crosshair光标呈现为⼗字线。
pointer光标呈现为指⽰链接的指针(⼀只⼿)
move此光标指⽰某对象可被移动。
e-resize此光标指⽰矩形框的边缘可被向右(东)移动。
ne-resize 此光标指⽰矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指⽰矩形框的边缘可被向上及向左移动(北/西)。
n-resize此光标指⽰矩形框的边缘可被向上(北)移动。
se-resize此光标指⽰矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指⽰矩形框的边缘可被向下及向左移动(南/西)。
s-resize此光标指⽰矩形框的边缘可被向下移动(南)。
w-resize此光标指⽰矩形框的边缘可被向左移动(西)。
text此光标指⽰⽂本。
wait此光标指⽰程序正忙(通常是⼀只表或沙漏)。
help此光标指⽰可⽤的帮助(通常是⼀个问号或⼀个⽓
球)。
具体效果如下(因为需要显⽰⿏标样式,所以没有办法截图,可以将下⾯的代码导⼊到编辑器查看)
<html>
<body>
<span >
Auto</span><br />
<span >
Crosshair</span><br />
<span >
Default</span><br />
<span >
Pointer</span><br />
<span >
Move</span><br />
<span >
e-resize</span><br />
<span >
ne-resize</span><br />
<span >
nw-resize</span><br />
<span >
n-resize</span><br />
<span >
se-resize</span><br />
<span >
sw-resize</span><br />
<span >
s-resize</span><br />
<span >
w-resize</span><br />
<span >
text</span><br />
<span >
wait</span><br />
<span >
help</span>
</body>
</html>
关于⾃定义光标,这⾥cursor的值设置为url,链接到图⽚
body {
cursor: url('some-cursor.ico'), default;
}
html矩形框代码怎么写这⾥可以设置default,也就是第⼀⽅案不起作⽤的时候,使⽤第⼆⽅案,光标⼤⼩过⼤或者过⼩可能不会显⽰
要注意的是,如果使⽤⾕歌浏览器,光标图案的⼤⼩会跟图⽚原⽣⼤⼩⼀样,但在⽕狐浏览器⾥,⾃定义光标图案总是缩⼩到标准⼤⼩。
图标的格式根据不同的浏览器来分:IE⽀持cur,ani,ico这三种格式,⽕狐⽀持bmp,gif,jpg,cur,ico这⼏种格式,不⽀持ani格式,也不⽀持gif动画格式,因此来说⼀般将图⽚存为cur或ico格式⽐较好,如果是ani格式的话,那么可以在⽕狐下⾯⽤jpg,gif,bmp来代替
(cursor:url(.....ani),url(.....gif),auto)