<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 鼠标cursor */
/* cursor:default 小白 | pointer 小手 | move 移动 | text 文本; */
.default {
cursor: default; /*小白*/
}
.pointer {
cursor: pointer; /*小手*/
}
.move {
cursor: move; /*移动*/
}
.text {
cursor: text; /*文本*/
}
.hand {
cursor: help; /*问号*/
}
/* 轮廓outline */
/* outline:outline-color || outline-style || outline-width */
/* 一般不会关心设置多少,去掉就好:outline:0;或outline:none;
点击表单input时候会默认有一个黑色轮廓,我们可以去掉,
也可以用 outline-color: red;改变轮廓颜色*/
.btn {
outline: none; /*去掉黑色轮廓*/
}
#resize {
/* resize:none可以防止 火狐 谷歌 等浏览器随意拖拽textarea破坏布局 */
resize: none;
}
</style>
</head>
<body>
<div class="box">
<span class="default">小白</span>
<span class="pointer">小手</span>
<span class="move">移动</span>
<span class="text">文本</span>
<span class="hand">问号</span>
</div></br>
<input type="text"></br>
<input class="btn" type="text">
<button>提交</button></br>
<textarea name="" id="resize" cols="30" rows="10">防止拖拽文本</textarea>
</body>
</html>
hand,pointer是手型
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-size是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果