css3详解

一.什么是CSS3

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

二.css3相较于css有什么改进（优点）

1. 模块化：CSS3将样式表分成了多个模块，每个模块负责一个特定的功能或特性。这种模块化的设计使得CSS3更加灵活和可扩展。

2. 新特性：CSS3引入了大量新的特性，包括圆角、阴影、渐变、动画、多列布局等。这些新特性使得开发者能够更方便地实现复杂的样式效果。

3. 增强样式选择器：CSS3引入了一些新的选择器，如属性选择器、伪类选择器和伪元素选择器等。这些新的选择器使得开发者能够更精确地选择DOM元素，从而灵活地应用样式。

4. 响应式布局：CSS3引入了媒体查询功能，可以根据设备的不同，自动适应不同的屏幕尺寸和分辨率。这使得开发者能够更轻松地创建响应式布局，提供更好的用户体验。

5. 字体支持：CSS3引入了新的字体模块，可以支持更多的字体格式和字体效果，提高了网页的设计效果。

6. 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