css3详解

一.什么是CSS3

++CSS3是Cascading Style Sheets的第三个版本++,是一种用于描述文档样式的语言(CSS3是CSS(层叠样式表)技术的升级版本)。它是前端开发中用于控制网页布局和样式的技术之一。CSS3引入了许多新的特性和功能,如圆角、阴影、渐变、动画等,大大增强了网页设计和交互的能力。与CSS2相比,CSS3提供了更多的选择和灵活性,使开发人员可以以更精细的方式控制网页的外观和表现。

二.css3相较于css有什么改进(优点)

模块化:CSS3将样式表分成了多个模块,每个模块负责一个特定的功能或特性。这种模块化的设计使得CSS3更加灵活和可扩展。
新特性:CSS3引入了大量新的特性,包括圆角、阴影、渐变、动画、多列布局等。这些新特性使得开发者能够更方便地实现复杂的样式效果。
增强样式选择器:CSS3引入了一些新的选择器,如属性选择器、伪类选择器和伪元素选择器等。这些新的选择器使得开发者能够更精确地选择DOM元素,从而灵活地应用样式。
响应式布局:CSS3引入了媒体查询功能,可以根据设备的不同,自动适应不同的屏幕尺寸和分辨率。这使得开发者能够更轻松地创建响应式布局,提供更好的用户体验。
  1. 字体支持:CSS3引入了新的字体模块,可以支持更多的字体格式和字体效果,提高了网页的设计效果。
2D和3D转换:CSS3新增了2D和3D转换的属性,可以实现元素的旋转、缩放、倾斜等效果,增强了用户体验和页面的动态效果。

总的来说,CSS3相比于CSS具有更多的功能和更灵活的样式选择器,能够更方便地实现复杂的样式效果和响应式布局。

三.css3必学的重点

CSS3 边框

CSS3 圆角
CSS3 背景
CSS3 渐变
CSS3 文本效果
CSS3 字体
CSS3 2D 转换CSS3 3D 转换(旋转)
CSS3 过渡
CSS3 动画
CSS3 多列
CSS3 用户界面
CSS3 图片
CSS3 按钮
CSS3 分页
CSS3 框大小
CSS3 弹性盒子
CSS3 多媒体查询
CSS3 多媒体查询实例
CSS 网格布局
CSS 网格容器Css 网格元素

四.新增重点特性

background属性

background-image:设置元素的背景图像。

background-origin:规定背景图片的定位区域。。

background-size:规定背景图片的尺寸。。

·background-repeat:设置是否及如何重复背景图像。

background-clip:用于确定背景画区
word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行

注:所有主流浏览器都支持 word-wrap 属性。

基础语法:

word-wrap:normal break-word:

text-shadow属性

text-shadow 属性:向文本设置阴影。

text-shadow基础语法:

text-shadow:5px 5px 5px #FF0000:

参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色;

font-face属性

font-face属性:定义自己的字体

transform 属性
提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。

属性值

border新增
  • border-radius:创建圆角边框

  • box-shadow:为元素添加阴影

  • border-image:使用图片来绘制边框

linear-gradient:(线性渐变)
radial-gradient :(径向渐变)

transition-property属性

定义:设置对象中的参与过渡的属性

语法:transition-property:none | all | property

特点

没有属性改变

默认值,所有属性都改变

元素的属性名 width,color等

transition-duration属性

定义: 设置对象过渡的持续时间

语法:transition-duration:time

规定完成过渡效果需要花费的时间,以秒或者毫秒计,默认值0

transition-timing-function属性

定义:设置对象中过渡的动画类型,即规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法:只能使用一个属性值

有兴趣加一下社区:http://t.csdnimg.cn/nl4Fi

相关推荐
咋吃都不胖lyh3 分钟前
.docx 和 .doc 是 Microsoft Word 文档的两种主要文件格式
前端·html·xhtml
哈乐3 分钟前
网工应用题:配置命令补全类题目
服务器·前端·网络
uuai4 分钟前
echarts不同版本显示不一致问题
前端·javascript·echarts
AKclown32 分钟前
基于Monaco的diffEditor实现内容对比
前端·vue.js·react.js
摆烂工程师1 小时前
(2025年11月)开发了 ChatGPT 导出聊天记录的插件,ChatGPT Free、Plus、Business、Team 等用户都可用
前端·后端·程序员
gongzemin1 小时前
使用阿里云ECS部署前端应用
前端·vue.js·后端
用户41180034153411 小时前
Flutter课题汇报
前端
环信1 小时前
实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程
前端
Dgua1 小时前
✨TypeScript快速入门第一篇:从基础到 any、unknown、never 的实战解析
前端
海云前端11 小时前
Vue3 大屏项目投屏功能开发:多显示器适配实践
前端