每日一学—CSS cursor 属性

简介: 每日学一点加强技术水平,夯实基础。阅读这篇文章,一起学习CSS cursor 属性吧。

定义和用法

cursor 属性规定要显示的光标的类型(形状)。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

可能的值:Auto、crosshair、default、pointer、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、help

具体查看文档CSS cursor 属性

测试代码

<html><body><p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p><spanstyle="cursor:auto">Auto</span><br/><spanstyle="cursor:crosshair">Crosshair</span><br/><spanstyle="cursor:default">Default</span><br/><spanstyle="cursor:pointer">Pointer</span><br/><spanstyle="cursor:move">Move</span><br/><spanstyle="cursor:e-resize">e-resize</span><br/><spanstyle="cursor:ne-resize">ne-resize</span><br/><spanstyle="cursor:nw-resize">nw-resize</span><br/><spanstyle="cursor:n-resize">n-resize</span><br/><spanstyle="cursor:se-resize">se-resize</span><br/><spanstyle="cursor:sw-resize">sw-resize</span><br/><spanstyle="cursor:s-resize">s-resize</span><br/><spanstyle="cursor:w-resize">w-resize</span><br/><spanstyle="cursor:text">text</span><br/><spanstyle="cursor:wait">wait</span><br/><spanstyle="cursor:help">help</span></body></html>

效果图

https://ucc.alicdn.com/images/user-upload-01/b7be3181171e46419ed6041ad6378d0a.gif

目录
相关文章
|
12天前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
|
15天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
21 1
|
15天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
27 1
|
21天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
26 1
|
3天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
|
4天前
|
前端开发 UED
CSS clip-path 属性
CSS clip-path 属性
12 0
|
28天前
|
前端开发
CSS属性众多
【5月更文挑战第24天】CSS属性众多
26 3
|
3天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
24 5
|
7天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
7天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)