在某些網站上,我們會看到不同的滑鼠游標圖案。這是由 cursor 屬性來設定的。 以下列出一些常見的滑鼠游標圖案,以及它們設定的方式 (請將滑鼠置於顯現結果的欄位,您將可以看到該滑鼠游標的圖案):
CSS 樣式 | 顯現結果 |
{ cursor: crosshair; } | 滑鼠游標圖案是 crosshair |
{ cursor: pointer; } | 滑鼠游標圖案是 pointer |
{ cursor: text; } | 滑鼠游標圖案是 text |
{ cursor: move; } | 滑鼠游標圖案是 move |
{ cursor: wait; } | 滑鼠游標圖案是 wait |
{ cursor: help; } | 滑鼠游標圖案是 help |
{ cursor: progress; } | 滑鼠游標圖案是 progress |
{ cursor: not-allowed; } | 滑鼠游標圖案是 not-allowed |
{ cursor: no-drop; } | 滑鼠游標圖案是 no-drop |
{ cursor: no-vertical-text; } | 滑鼠游標圖案是 no-vertical-text |
{ cursor: all-scroll; } | 滑鼠游標圖案是 all-scroll |
{ cursor: col-resize; } | 滑鼠游標圖案是 col-resize |
{ cursor: row-resize; } | 滑鼠游標圖案是 row-resize |
{ cursor: e-resize; } | 滑鼠游標圖案是 e-resize |
{ cursor: ne-resize; } | 滑鼠游標圖案是 ne-resize |
{ cursor: n-resize; } | 滑鼠游標圖案是 n-resize |
{ cursor: nw-resize; } | 滑鼠游標圖案是 nw-resize |
{ cursor: w-resize; } | 滑鼠游標圖案是 w-resize |
{ cursor: sw-resize; } | 滑鼠游標圖案是 sw-resize |
{ cursor: s-resize; } | 滑鼠游標圖案是 s-resize |
{ cursor: se-resize; } | 滑鼠游標圖案是 se-resize |
我們也可以自定游標圖案。自定圖案的語法是:
{ cursor: url(圖案網址); } |
沒有留言:
張貼留言