CSS3 新增选择器
子级选择器
语法： element1>element2
注意： 如果element2不是element1的直接子级，则不会被选中。“>”前后必须是直接父级和直接子级。
兄弟选择器
语法：
element1 + element2
element1 ~ element2
注意：
1. 选中的是后面相邻的同级元素
2. 只能选中紧邻后面一个元素
3. 两元素有相同父级
4. “+”符号前后壳有空格
结构伪类选择器
可以匹配父元素中的首个、最后一个子元素，也可以匹配指定的子元素； 也可以根据类型匹配，匹配方法同子元素。
选择器： 描述：
E:first-child 匹配父元素中第一个子元素E
E:last-child 匹配父元素中最后一个子元素E
E:nth-child(n) 匹配父元素中第n个子元素E。 同时满足两个条件（选中第n个子元素且是E类型的标签）。
E:first-of-type 指定类型E第一个
E:last-of-type 指定类型E最后一个
E:nth-of-type(n) 指定类型E第n个。 匹配同来性中的第n个同级兄弟元素E，忽视同级中其他类型的元素。
注意：选择器中的“n”，可以是数字，关键字，公式。
- 数字嗲表选中第几个；
- 关键字如奇数odd、偶数even
- 公式：
- 2n：偶数；
- 2n+1：奇数；
- 5n：5 10 15...
- n+5：从第五个（包含5）开始到最后，5 6 7 8 9 ...
- -n+5：前五个（包含5），5 4 3 2 1 0
伪元素选择器
选择器： 描述：
E::befor 在E元素内部的前面插入一个元素
E::after 在E元素内部的后面插入一个元素
E::first-letter 选中E容器内部的第一个字母
E::first-line 选中E容器内部的第一行文本
注意：伪元素只能给双标签添加； 伪元素冒号前不能有空格； 伪元素里面必须写属性content:"";
属性选择器
选择器： 描述：
E[att] 选中具有att属性的E元素
E[att="val"] 选中具有att属性且属性值等于val的E元素
E[att^="val"] 选中具有att属性且属性值以val开头的E元素
E[att$="val"] 选中具有att属性且属性值以val结尾的E元素
E[att*="val"] 选中具有att属性且属性值包含val的E元素
!选择器权重总结：
- 基础选择器：id选择器 > 类选择器 > 标签选择器 > *
- 伪类选择器、属性选择器的权重等于类选择器
- 伪元素选择器权重等于标签选择器
CSS3 盒模型
box-sizing属性，来指定和模型，饿哦们就可以设置如何计算一个元素的总宽度和总高度。
属性值：
content-box： 标准盒模型，盒模型外扩。
border-box： 怪异模式， 盒模型内减。
标准模式：
content-box： 默认的， 标准模式。 定义了在盒子的width和height之外绘制元素的内边距和边框。 也就是给盒子添加padding、border属性值时，盒子内部的内容区域大小width、height不会发生变化。
standard模式： 标准模式中，盒子总体大小为width(height)+padding+border，内容区域是width和height。
怪异模式：
border-box: 为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。
Quirks模式： 怪异模式中，定义盒子总体大小为width和height，添加padding和border属性后，宽高不变，内容区减小。
CSS3新增属性
边框圆角属性
作 用：
设置边框的圆角。 美化样式。
属性名：
border-radius
属性值：
- 像素值： 以x像素值为半径画圆的弧度作为圆角。
- 百分比： 以自身宽或高的百分比数值大小为半径画圆的弧度作为椭圆角。
语法格式有以下几种：
border-radius:x-radius/y-radius;
表示水平方向x的属性值和垂直方向y的属性值。
如果x、y属性值相同，可以简化写一个值去定义：
border-radius:30px；定义了四个角都是一样的属性值。
单一属性的写法：
border-top-left-radius：
border-top-right-radius：
border-bottom-right-radius：
border-bottom-left-radius：
注意：书写格式先写上下，后下左右。
综合写法：
border-radius： 四个角相同； 定义一个属性值时。
border-radius： 左上角 右上角 右下角 左下角； 定义四个属性值时
border-radius： 左上角 右上角/左下角 右下角; 定会三个属性值时
border-radius： 左上角/右下角 右上角/左下角; 定义两个属性值时
“/” 的属性值写法：
border-radius 属性值中出现了/斜线， /前面可以定义水平方向的四种值写法，/后面可以设置垂直方向的四种值写`法。/ 前后可以按需搭配组合。
例： border-radius： 50% 20% 30% / 20% 10%;
文字阴影
作用：
通过 text-shadow 属性可向文本定义阴影。 其属性值可以规定水平方向、垂直方向、模糊距离、阴影颜色等。
属性值：
h-shadow： 必选值（像素值）。 水平方向的阴影位置。 允许负值。
v-shadow： 必选值（像素值）。 垂直方向的阴影位置。 允许负值。
blur： 可选值（像素值）。 模糊距离。
color： 可选值（颜色值）。 阴影颜色。
语法格式：
text-shadow: 水平位置 垂直位置 模糊程度 颜色;
text-shadow: 3px 3px 3px #666;
多层阴影：也可以定义多层阴影效果
可以用逗号隔开单个定义的属性值。 多层阴影有压盖问题，先写的压盖后些的。
例： p {
text-shadow: 3px 3px 3px #666,
4px 4px 4px #666,
5px 5px 5px #666;
}
盒子阴影
作 用：
box-shadow 属性给盒子的边框添加阴影。
属性值：
h-shadow： 必选值（像素值）。 水平方向的阴影位置。 允许负值。
v-shadow： 必选值（像素值）。 垂直方向的阴影位置。 允许负值。
blur： 可选值（像素值）。 模糊距离。
color： 可选值（颜色值）。 阴影颜色。
spead： 可选值（像素值）。 阴影的尺寸。
inset： 可选值。 将外部阴影改为内部阴影。
语法格式：
box-shadow: 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影;
box-shadow: 3px 3px 3px 30px #666 inset;
注意：扩展大小： 定义将盒子宽高变大多少px
是否内边框阴影： 默认外边框阴影。 添加inset属性值定义内边框阴影
多层阴影：
实现方式同文本阴影格式。
可以用逗号隔开单个定义的属性值。 多层阴影有压盖问题，先写的压盖后些的。
例： div {
border: 1px solid #333;
box-shadow: 3px 3px 3px 3px #666,
4px 4px 4px 4px #666,
5px 5px 5px 5px #666;
}
CSS3 过度属性
属性名：
transition
作用：
使用 transition 属性可以实现补间动画（过渡效果），并且当前元素只要属性发生变化时即存在两种状态（A和B代指），那么A和B之间就可以实现平滑过度的动画效果。
语法格式：（综合写法）
transition：过度属性 过度时间 运动曲线 延时时间;
属性：
- transition： 简写的属性。 后面可以定义四个过度属性。
- 过度属性: transition-property： 过度的css属性名。
属性值：
- none： 没有属性过度。
- all: 所有变化的属性都过度。
- 属性名：具体的属性名，定义多个属性可用逗号隔开
- 过渡时间: transition-duration： 定义过度时间。 默认值0。
属性值：
数值。 单位s秒 。
- 过渡曲线: transition-timing-function： 过度曲线。 默认值“ease”。
属性值：
- linear： 匀速过度效果。 规定以相同速度开始至结束。
- ease： 规定慢速开始、速度变快、慢速结束的过度效果。
- ease-in： 规定慢速开始。
- ease-out： 规定慢速结束。
- ease-in-out： 规定慢速开始、慢速结束。
- cubic-bezier(x1,y1,x2,y2)： 函数曲线（贝塞尔曲线）。x1、x2取值0-1；y1、y2取值任意数值，四个数值表示拉扯的点的两个坐标。
- 延时时间: transition-delay： 延时时间。 过度开始的时间。 默认值。
属性值：
数值。 单位s秒 。
2D 转换
属性名：
transform 转换属性
作用：
css3可以通过 transform 属性对元素进行移动、缩放、旋转、拉伸、拉长效果。 配合过度和动画知识可以取代flash才可以实现的动画效果。
位移 translate()
transform 属性的属性值为 translate() 时，可以实现元素位移效果。
语法格式：
transform: translate(x,y);
x水平方向位移距离，y垂直方向位移距离。 xy取值可以是px像素值或百分比。 区分正负。 当translate(x)只写一个值时，定义水平方向的位移。
属性值：
多种转换方法的属性值可以实现不同的转换效果。
- translate(x,y) 定义位移
缩放 scale()
transform 属性的属性值为 scale() 时，可以实现元素缩放效果。
语法格式：
transform: scale(x,y);
注意：定义元素以元素中心点为中心点根据xy数值大小以倍数缩放。
属性值：
- scale(x,y) 定义了分别改变元素的宽度高度的倍数
- scale(n) 定义宽高同事缩放n倍
- scaleX(n) 改变元素的宽度
- scaleY(n) 改变元素的高度
旋转 rotate()
transform 属性的属性值为 rotate() 时，可以实现元素旋转效果。
语法格式：
transform: rotate(数值deg);
注意：deg为单位：度数。 正数表示顺时针旋转，负数逆时针旋转。 2D中旋转只有一个属性值。 元素旋转后坐标轴也跟着发生变化。 因此多个属性值同时设置给 transform 时，书写顺序不同导致的旋转效果有差异。
倾斜 skew()
transform 属性的属性值为 skew() 时，可以实现元素倾斜效果。
语法格式：
transform: skew(数值deg,数值deg);
注意：deg为单位：度数。 两个数值分别表示XY轴方向倾斜的角度，属性值区分正负。 默认数值为0。
只写一个数值时，元素以x水平方向倾斜。 正数代表向x轴正方向倾斜，负数代表向x轴负方向倾斜；y数值同理。
基准点 transform-origin属性
作用：2D转换中多属性位移会造成元素原点发生变化， 通过 transform-origin 属性可以调整元素的水平和垂直方向的位置。 就是定义元素的原点， 规定以哪个点为原点旋转。
语法格式：
transform-origin: x y;
注意：属性值包含两个值，中间用空格隔开。
属性值：
x： 定义x轴的原点在何处。可能值：left、center、right、像素、百分比
y： 定义y轴的原点在何处。可能值：top、center、bottom、像素、百分比
3D 转换
3D透视&旋转
坐标轴：X轴、Y轴、Z轴。
- X轴：电脑屏幕左上角为原点，向右水平方向为X轴正方向，左为负方向。
- Y轴：电脑屏幕左上角为原点，向下垂直方向为Y轴正方向，上为负方向。
- Z轴：电脑屏幕左上角为原点，垂直XY水平面正面方向为Z轴正方向，反为负方向。
透视：
透视将2D平面在转换的过程中呈现出3D效果。
作用：
设置在z轴的实现焦点的观察位置，从而实现3D查看效果。
特点：
近大远小。
属性：
perspective： 透视
属性值：
像素值。数值越大代表观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
- rotateX(angle) 定义沿着X轴进行3D旋转。正数值顺时针旋转，负数值逆时针旋转
- rotateY(angle) 定义沿着Y轴进行3D旋转。正数值顺时针旋转，负数值逆时针旋转
- rotateZ(angle) 定义沿着Z轴进行3D旋转。正数值顺时针旋转，负数值逆时针旋转
注意：
透视属性 perspective:1000px; 要设置给3D变化元素的父级。
3D变化元素设置旋转效果： transform: rotateX(30deg);
实现：
.fu{
perspective:1000px;
}
.zi img{
transition:img 1s ease;
}
.zi img:hover{
transform: rotateX(30deg);
}
3D位移
属性值：
- translateX(x) 设置X轴的位移值。
- translateY(y) 设置Y轴的位移值。
- translateZ(z) 定义3D位移，设置Z轴的位移值。
属性值可以为像素值或百分比，正负值代表位移方向。正数向对应轴的正方向移动，负值向对应轴的负方向移动。
CSS3 动画
CSS3创建动画分两步： 创建动画、绑定动画。
创建动画
关键字：
@keyframes 规则： 用于创建动画。
功能：
在 @keyframes 中规定某项CSS样式。 可以创建从一种样式逐渐变化为另一种样式效果。可以人一多样式和改变次数。
语法格式：
@keyframes 动画名称{
动画过程，可以写任意在百分比过程的动画细节。
}
绑定动画
背景：
需要把 @keyframes 创建的动画绑定到某个选择器上，否则不会产生动画效果。
属性：
animation
单一属性：
- animation-name 规定 @keyframes 动画名称
- animation-duration 规定完成一个动画周期的时间秒或毫秒。 默认0
- animation-timing-function 规定动画的曲线。 默认是“ease”。
- animation-delay 规定动画多久开始。 默认0
- animation-iteration-count 规定动画播放次数。 默认1。 infinite表示无限次数播放
作用：
animation 属性用于对动画进行绑定。
语法结构：
div{
animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
}
其中必须设置动画名称和过度时间，其他属性按需设置。
