使用自定義的鼠標圖標 --- cursor url

前段時間在項目中遇到過 自定義鼠標圖標 這一需求。由於一般我們用的鼠標樣式大都是固定的幾種，而 自定義鼠標圖標 不是很常用到，所以對這一小知識點進行總結，以防忘記。

自定義鼠標圖標即 css cursor url的使用。

css:{cursor:url("圖標路徑"),auot};
//IE，FF，chrome瀏覽器都可以

示例代碼：

 <style type="text/css">
        .btn{
            cursor: url("./img/pointer.jpg"),auto;
        }
</style>

解析：前面的url是自定義鼠標圖標的路徑，可以爲相對/絕對路徑。第二個參數是css標準的cursor樣式。可換成其他屬性（如pointer/default/等）

注意：w3school推薦第二個參數必須定義一個普通的光標，以防止url定義的光標有備用選項。另外，IE下第二個參數可以省略。

IE支持cur,ani,ico這三種格式，FF支持bmp,gif,jpg,cur,ico這幾種格式，不支持ani格式，也不支持gif動畫格式，因此一般將url引用的圖標存爲ico或cur格式比較好。

鼠標圖標的尺寸推薦32*32，否則可能出現大小不一致問題。

附上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	此光標指示可用的幫助（通常是一個問號或氣球）