CSS光标的各个形状总结验证
1、我们来新建一个div，div大小为200px的正方形区域，背景颜色为红色，具体代码如下：
<html>
<head>
<title>鼠标形状</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
可以看到默认的情况下鼠标是箭头形状的。
2、设置鼠标是十字形的，具体代码如下：
<html>
<head>
<title>鼠标形状</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
cursor:crosshair;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
如下图可以看到，在红色区域内有个十字型的光标，在其他区域就没有这个光标了。
3、还有一个常用的光标是转圈或者漏斗状态的，表示需要等待的光标，具体代码如下：
<html>
<head>
<title>鼠标形状</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
cursor:wait;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
具体执行效果图如下，可以看到光标的外形变成了一个不停旋转的圆圈了。
4、在文本可编写的时候有个大写I的这种光标，表示可编辑的水平文本的光标，具体代码如下：
<html>
<head>
<title>鼠标形状</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
cursor:text;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
现在是不是在红色区域中变成了可输入的光标样式了呢，其实这里面是不能输入的。
5、我们在可拖动的窗口中经常会遇到一个箭头加十字的形状的一个光标，具体代码如下：
<html>
<head>
<title>鼠标形状</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
cursor:move;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
如下，可以看到具体的效果图。
6、带有箭头加问好的光标帮助类光标实现代码如下：
<html>
<head>
<title>鼠标形状</title>
<style>
div{
background-color:red;
width:200px;
height:200px;
cursor:help;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
如下图可以看到具体执行结果图。
