一、简介
1.CSS3是最新的CSS标准。CSS3继承了CSS2.1并进行了增补与修改。
2.CSS3按模块化设计。最新变化包括：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面等。
3.兼容：渐进式兼容。
4.各个主流浏览器的兼容性前缀（重要）
内核 浏览器 前缀
Trident IE -ms-
Webkit Chrome、Safari -webkit-
Gecko 火狐（FireFox） -moz-
Presto Opera -o-
二、CSS3新增选择器
1.属性选择器
1.E[attr] 选中具有attr属性的E元素
2.E[attr="value"] 选中具有attr属性且值为value的E元素
3.E[attr^="value"] 选中具有attr属性且属性值以value开头的E元素
4.E[attr$="value"] 选中具有attr属性且属性值以value结尾的E元素
5.E[attr*="value"] 选中具有attr属性且属性值包含value的元素
其中，可以省略E，代表所有元素
注意：[]的权重与class是同一个级别
2.行为状态选择器
（1）伪类：
旧：
E：link
E：hover
E:visited
E:focus
E:active
新增：
E:checked 元素被选中
E：disable 元素失效时被选中
E：enable 元素有效时被选中
E：placeholder 元素占位符被选中
（2）伪元素：
E：after
E:before
（3）结构伪类选择器
1.nth-child
E:nth-first-child{} 父元素中第一个元素是E元素
E:nth-last-child{} 父元素中最后一个元素是E元素
E:nth-child(n){} 父元素中第n个元素是E元素
n关键字：
odd:奇数
even:偶数
表达式：
2n 2n+1 3n+1 等
数字：
1 2 3 4 5 6 ……
注意：先强调在父元素中的顺序，然后再判断元素是否是E元素。
我是这样理解的：假如你和原配生了child（E元素），但是又不小心和隔壁老王生了child（其他元素），看选择器名称：nth-child，即对于child来说，最重要的是他们都属于你的，其次才判断这些child是否是E元素（你与原配生的）。
2.nth-of-type
E:first-of-type{} 在父元素中选中子元素为E元素的第一个
E:last-of-type{} 在父元素中选中子元素为E元素的最后一个
E:nth-of-type(n){} 在父元素中选中子元素为E元素的第n个
E:nth-last-of-type(n){} 在父元素中选中子元素为E元素的倒数第n个
n关键字，表达式，数字 与nth-child一样
注意：先强调类型， 然后再判断类型中的顺序（与nth-child相反） 。
因此，我的理解是这样，假设你是那位原配，你发现了你的另一半与隔壁老王生了孩子（其他子元素），你不能接受这孩子，在你心里，孩子的类型（type）只有E元素才是你的孩子（E元素）。
三、边框、圆角
1.边框圆角：border-radius
让四个角都圆角
数值：弧度的长度
（1）数值1/数值2：
数值1：代表角度水平方向的长度
数值2：代表代表角度垂直方向的长度
没有值时：水平和垂直长度一样
（2）单独设置某一个角度的圆角
border-top-left-radius: 左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
（3）值的方向
1个值 ： 4个方向
3个值 ： 左上 右上左下 右下
2个值： 左上右下 右上左下
4个值 ： 左上 右上 右下 左下 顺时针方向
（4）值列表1/值列表2
值列表可以是1值或者2值或者4个值
值列表1全部代表水平方向
值列表2全部代表垂直方向
（5）值单位
1.px
2. %: 相对于自身的
四、背景填充
1.背景：background
（1）background-clip : 背景图片填充范围
content-box : 背景图片填充到内容区域
padding-box : 背景图片填充到padding区域
border-box : 背景图片填充到border区域（默认值）
（2）background-origin : 背景图片左上的位置起点
content-box : 内容区域的左上角
padding-box : padding区域的左上角（默认值）
border-box : border区域的左上角
2.多重背景：
可以同时设置多张背景图片
用逗号隔开， 越先写， 显示越靠前(上方)
3.背景尺寸
background-size：设置背景图片的尺寸
1个值时：代表宽度，高度等比例缩放
百分数：相对与自身盒子的宽高
关键字：
cover:让图片等比例缩放，完全填充盒子
缩放后，多余部分不会显示
contain:让图片等比例缩放，让盒子完全装下图片
让盒子留出多余区域的背景
五、盒模型
1.盒模型： content + 内边距 + 外边距 + 边框
（1）width:内容宽度
（2）box-sizing :
border-box（怪异盒子）：width=内容的宽度+ 左右padding值+左右border值
盒子的宽度=width+左右margin值
content-box(正常的盒子)：width=内容区域（默认）
盒子的宽度=width+左右padding值+左右border值+左右margin值
2.盒子阴影：
（1）box-shadow: x偏移量 y偏移量 模糊值 增强值 阴影颜色 内外阴影；
增强值： 代表纯色区域的范围
模糊值： 从边框开始颜色淡化的范围
内外阴影 :
inset : 内阴影
outset ：外阴影（默认值）
除了偏移量以外都可以省略，阴影颜色默认为黑色，阴影可以叠加，中间用逗号隔开。
（2）动态更改盒子大小： resize
none : 用户不可以更改大小
vertical : 可以更改垂直方向的大小
horizontal : 可以更改水平方向的大小
both: 可以同时更改水平和垂直方向的大小
【注意】除none以外的其他属性，必须配合overflow使用， 且overflow的值不能为visible。
六、文本
1.文本
（1）letter-spacing:字间距
（2）word-spacing:词间距，以空格为依据识别词/单词
（3）word-break:换行模式
break-all:允许单词内换行
keep-all:单词不会被拆分，从空格，连接字符中拆分
（4）white-space:
nowrap:不换行
normal:换行（默认）
2.文字阴影
（1）text-shadow: x偏移量 y偏移量 模糊值 阴影颜色
可以同时写多个阴影，阴影之间用逗号隔开。
七、渐变
1.类型：线性渐变、径向渐变
2.线性渐变：linear-gardient(to 方向，颜色列表）
颜色列表：由多种颜色构成，颜色之间用逗号隔开
（1）方向：
left， right， top， bottom
left top, left bottom, right top , right bottom
（2）角度：按顺时针方向,单位不能忽略
0deg top
45deg right top
90deg right
135deg right bottom……
（3）节点：
从上一个节点渐变到当前节点
有节点位时，默认0节点的颜色为第一个颜色
（4）节点的位置：
px：从起始点计算距离
百分数：从起点计算距离，距离占总长度的百分比
（5）重复渐变：
repeating-linear-dardient（to 方向，颜色列表）
多个小于总宽高的渐变重复平铺，配合background-size使用
3.径向渐变
radial-gardient(中心点，颜色节点列表）
(1)颜色列表：由多种颜色构成，颜色之间用逗号隔开
上一种颜色过渡到当前颜色
(2)默认0节点的颜色是第一种颜色，默认100%节点是最后一种颜色
(3)中心点：at
水平：left、center、right
垂直方向：top、center、bottom
(4)距离：
px
百分数
(5)重复径向渐变
repeating-radial-gardient（中心点，颜色节点列表）