css3新增功能有哪些

选择器、背景、圆⾓、阴影、过渡、变形、动画、弹性布局等等

  1. 超级选择器:如属性选择器、结构性伪类选择器、UI元素状态伪类选择器、通用兄弟元素选择器等,它们使得对页面元素的选取和样式的定义更为精准和灵活。
  2. 文字阴影与自动换行:通过text-shadow属性,可以为文字添加阴影效果,增强视觉效果;word-wrap或overflow-wrap属性可以实现自动换行。
  3. 盒模型:CSS3对盒模型进行了扩展,包括inline-block、inline-table、list-item、run-in、compact、表格相关、none等类型,以及盒模型的属性如overflow、box-shadow和box-sizing。
  4. 背景样式:CSS3新增了背景样式,如background-size、background-origin和background-clip等,可以更精细地控制背景图像的显示方式。
  5. 转换、过渡和动画:CSS3提供了强大的转换(transform)、过渡(transition)和动画(animation)功能。元素可以进行移动、缩放、转动、拉长或拉伸等操作,实现平滑的样式变化和动态效果。
  6. 多列布局:CSS3的多列布局允许创建报纸样式的多列文本布局,通过column-count、column-gap和column-rule等属性进行控制。
  7. 用户界面特性:CSS3提供了新的用户界面特性,如重设元素尺寸、盒尺寸以及轮廓等,使得用户界面的定制和样式更加灵活。

以上只是CSS3新增功能的一部分,更多详细内容可以查阅相关教程或文档。

其中选择器最具作用CSS3的伪类选择器是一种超级选择器,它们可以帮助你更精确地控制样式。以下是一些例子:

  1. :hover:这个伪类选择器用于选择鼠标悬停时的元素。例如,你可以改变鼠标悬停在链接上时的颜色:a:hover { color: red; }

  2. :active:这个伪类选择器用于选择被激活的元素,例如被点击的链接。a:active { color: green; }

  3. :visited:这个伪类选择器用于选择用户已经访问过的链接。你可以改变这些链接的颜色以区分已访问和未访问的链接:a:visited { color: purple; }

  4. :first-child:last-child:这些伪类选择器用于选择特定元素的第一个或最后一个子元素。例如,你可以给每个段落的第一行加下划线:p:first-child { text-decoration: underline; }

  5. :nth-child(n):这个伪类选择器用于选择特定元素的第n个子元素。例如,你可以给偶数行加背景色 tr:nth-child(even) { background-color: #f2f2f2; }

复制代码
相关推荐
Hilaku7 分钟前
OpenClaw 跟病毒的区别是什么?
前端·javascript·人工智能
jerrywus8 分钟前
AI 写代码总翻车?我用 Harness:developer 把它管成“右侧打工人”
前端·agent·claude
沸点小助手1 小时前
「国产龙虾谁能打过OpenClaw & 你敢让微信龙虾碰代码吗」沸点获奖名单公示|本周互动话题上新🎊
前端·后端·面试
skywalk81631 小时前
请学习kotti的前端(kotti其实是没有分离的前端的)实现,做到形似kotti那样的前端页面。
前端·学习
UI设计兰亭妙微2 小时前
兰亭妙微加载体验设计白皮书:从骨架屏到后台加载的全场景优化策略
前端·b端界面设计·ui设计公司
逆光如雪2 小时前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
scan7242 小时前
龙虾读取session历史消息
java·前端·数据库
莹宝思密达2 小时前
地图显示西安经济开发区边界线-2023.12
前端·vue.js·数据可视化
lizhongxuan2 小时前
LLM Wiki:让大模型替你打理知识库的完整指南
前端·后端·面试
宇擎智脑科技2 小时前
Claude Code 源码分析(七):终端 UI 工程 —— 用 React Ink 构建工业级命令行界面
前端·人工智能·react.js·ui·claude code