1.前言
CSS3的出現解決了很多讓人頭疼的問題，至少我想很多童鞋都這樣認為。css3的cursor屬性大家用的應該是非常的多的，我想用的比較多的像cursor:pointer;cursor:help;cursor:text;等等。很少人用到cursor:zoom-in/zoom-out;今天就來講一下這兩個屬性值的用法。
2.簡介
cursor的定義和用法
cursor屬性規定要顯示的光標和類型（形狀）。定義了鼠標指針放在一個元素邊界范圍內時所用的光標形狀。默認值是auto;大部分常用的值有以下：
| crosshair | 十字准心 |
| pointer;hand（IE5只認識hand） | 手形狀 |
| wait | 等待（沙漏） |
| help | 幫助 |
| no-drop | 無法釋放 |
| text | 文本/編輯 |
| move | 可移動對象 |
| n-resize | 向上改變大小 |
| s-resize | 向下改變大小 |
| e-resize | 向右改變大小 |
| w-resize | 向左改變大小 |
| ne-resize | 向上右改變大小 |
| nw-resize | 向上基改變大小 |
| sw-resize | 向下左改變大小 |
| se-resize | 向下右改變大小 |
| auto | 自動 |
| not-allowed | 禁止 |
| progress | 處理中 |
| default | 默認（通常為一個箭頭） |
| url('#') 文件格式必須為.cur或.ani | 用戶自定義 |
部分光標參考圖片如下：
zoom-in/zoom-out 就是讓元素的鼠標形狀變成“放大鏡”/“放小鏡”的效果；如下圖：
有了這個屬性，我們就不用自己制作一個.cur的放大鏡文件和.cur的放小鏡文件了，直接用該屬性就可以代替了。不過此屬性IE11（包括IE11）不支持，其他游覽器倒是都支持。如果你的項目要求兼容性非常高，那還得搞兩個.cur的文件了
具體css樣式寫法如下：
1 .zoom-in{ 2 cursor: -moz-zoom-in; 3 cursor: -webkit-zoom-in; 4 cursor: zoom-in; 5 cursor: url(../images/big.cur); 6 } 7 .zoom-out{ 8 cursor: -moz-zoom-out; 9 cursor: -webkit-zoom-out; 10 cursor: zoom-out; 11 cursor: url(../images/small.cur); 12 }
效果可以點擊這里查看 點擊圖片在頁面居中顯示
3.延伸
與這個屬性值差不多的另一個cursor：grab/grabbing.這個是讓元素的鼠標形狀變成手狀，張大大說過，俗稱“咸豬手”和“抓奶手”.(不是我說的);
這個主要用在實現拖拽和移動內容這種效果的時候；有了這個屬性，就比較方便了
圖片效果如下：
css代碼如下（如果要做瀏覽器兼容，還是那樣，得加個.cur文件了）
1 .grab { /* 抓 */ 2 cursor: -webkit-grab; 3 cursor: -moz-grab; 4 cursor: grab; 5 cursor: url(../images/grab.cur); 6 } 7 .grabbing { /* 抓住拖動 */ 8 cursor: -webkit-grabbing; 9 cursor: -moz-grabbing; 10 cursor: grabbing; 11 cursor: url(../images/grabbing.cur); 12 }
4.總結
css3有很多好的屬性，用起來方便的不要不要的。而且效果還挺高大上的。所以大家要多看看css3.學習無止境！大家要共勉！