如何用CSS自定義鼠標(biāo)顯示的形狀？_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，為了達(dá)到個(gè)性效果，需要將系統(tǒng)默認(rèn)的鼠標(biāo)外形改變掉，自寶義鼠標(biāo)顯示的外形，我們以前可以用javascript來實(shí)現(xiàn)。現(xiàn)在我們完全可以用css來實(shí)現(xiàn)這一個(gè)性效果了。

　　CSS有一個(gè)屬性：cursor，其作用是設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)外形。
　　我們看下面的實(shí)例，更好的理解如何用CSS自定義鼠標(biāo)顯示的外形。

代碼調(diào)試框 [m.ghpqjb.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.ghpqjb.com</title>
<style type="text/css">
span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}
</style>
</head>
<body>
hand 手型
crosshair 十字
text 文本
wait 等待
help 問號(hào)
e-resize 右的箭頭
ne-resize 右上的箭頭
n-resize 上的箭頭
nw-resize 左上的箭頭
w-resize 左的箭頭
sw-resize 左下的箭頭
s-resize 下的箭頭
se-resize 右下的箭頭
move 移動(dòng)
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]