时间:2021-07-01 10:21:17 帮助过:19人阅读
今天学习了CSS的cursor属性,第一篇博客就用来总结它吧。
cursor属性用于控制光标的显示样式,可取的值有这些:
cursor:url()*|{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}
*表示至少写一个该值,url后面可再选{}内的一个值。
1 2 3 4 5CSS之cursor属性 6 34 35 36 百度37指示和选择光标
38auto:浏览器默认
39default:操作系统默认光标
40hand:手型
41text:大写的I,水平文本选择
42vertical-text:大写的I,垂直文本选择
43help:箭头加问号,获取帮助
44pointer:手形,表示链接
45not-allowed:红色圆圈和斜杠,禁止操作
46no-drop:红色圆圈和斜杠,无法释放
47crosshair:十字瞄准,表示精确选择
48
49表程序状态
50wait:选转环,表示等待直到不忙,不能交互
51progress:箭头加旋转环,处理中,可以交互
52 53
54move用于移动对象
55move:移动对象,两端带箭头的十字
56all-scroll:移动
57在四个角上改变窗口大小
58ne-resize:向东(右)或/和北(上)
59sw-resize:向西(左)或/和南(下)
60nw-resize:向西(左)或/和北(上)
61se-resize:向东(右)或/和南(下)
62
63在四条边上改变窗口大小
64东西用于改变水平宽度
65e-resize:向东(右)
66w-resize:向西(左)
67南北用于改变垂直高度
68s-resize:向南(下)
69n-resize:向北(上)
70col-resize:改变列宽
71row-resize:改变行高
72 73
还有几个属性值没有弄清楚:hand url col-resize row-resize 弄清楚了再在修改博客。
第一次写博客,各种不熟悉。学的也不够扎实,欢迎指正。