css3新特性

1，伪元素选择器
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
2，CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、**box-sizing: content-box ** 盒子大小为 width + padding + border ，content-box:此值为其默认值，其让元素维持 W3C的标准Box Mode。
2、box-sizing: border-box 盒子大小为 width ，就是说 padding 和 border 是包含到width里面的。
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
3，颜色模式
RGBA
R红色，G绿色，B蓝色，A透明度
HSLA
H色调色相，0或360表示红色，120表示绿色，240表示蓝色，取值为0~360。
S饱和度，取值0~100%。
L亮度，取值0~100%。
A透明度，取值0~1。
4，盒子阴影（CSS3）
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
（前两个必写）

	文本阴影text-shadow
	text-shadow：x轴 y轴 模糊半径 颜色;
	模糊半径和颜色为可选项。可添加多层。

5，渐变(放在background里用)
线性渐变linear-gradient沿着某条直线朝一个方向产生渐变效果。
linear-gradient ([[ | to <side-or-corner],] ? , [,…]);

	（1），angle渐变方向：
	
	to left 从右到左，相当于279deg
	to right 从左到右，相当于90deg
	to top 从下到上，相当于0deg
	to bottom 从上到下，相当于180deg（默认）
	= <color起止颜色>[<length用长度指定起止色位置> | <percentage用百分比指定>]?
	（2），径向渐变radial-gradient从一个中心店开始沿着四周产生渐变效果。
	radial-gradient ([ [ || ] [at ] ?, | at ]?, [,…]);
	
	shape渐变的形状：
	
	ellipse表示椭圆形（默认）
	circle表示圆形
	size大小:
	
	closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
	closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
	farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
	farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
	at 坐标：
	
	默认正中心，可以是top bottom left right，也可以是length用长度指定起止位置和percentage用百分比。
	
	= <color起止颜色>[<length用长度指定起止色位置> | <percentage用百分比指定>]?
	（3），重复渐变
	repeating-linear-gradient与线性渐变语法一样。
	repeating-radial-gradient与径向渐变语法一样，只不过只要写要重复的部分即可。

6，transition过渡效果属性（重点）
transition: property duration timing-function delay;
只能为有具体值的属性添加，从某个值到某个数值。过渡完会恢复原来的样子。
transiton属一个简写属性，有以下取值（可单设置，可多写设置多过渡）：

		transition-property	规定设置过渡效果的 CSS 属性的名称。（必设）all代表所有样式（少用）
		transition-duration	规定完成过渡效果需要多少秒或毫秒。（必设）
		transition-timing-function	规定速度效果的速度曲线函数。
		transition-delay	定义过渡效果何时开始。

7，伸缩布局（重点）
版心一般设有mix-width或max-width。

	1. display: flex;属性（伸缩布局中必设）
	display: flex; 如果一个容器设置了这个属性，那么这个盒子里面的所有之间子元素都会自动的变成伸缩项（flex item）。
	
	2. justify-content属性（重要）
	justify-content 属性 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。flex-direction设置什么排列方式，那个方向就是主轴，它的相反垂直/水平则是侧轴。注意兼容。
	
	**提示：**使用 align-content 属性对齐交叉轴上的各项（垂直）。
	3. flex-flow 属性（flex-direction 和 flex-wrap 属性的复合属性）
	flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，即flex-flow 为简写属性。
	
	flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
	flex-direction 属性规定灵活项目的方向。
	flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
	**注意：**如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。
	4. flex-grow 属性（扩展规则）
	flex-grow 属性用于设置或检索弹性盒子的扩展比率。
	**注意：**如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
	
	flex-grow: number|initial|inherit;
	
	number一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 越大相对扩展越多。
	
	5. flex-shrink 属性（收缩规则）
	flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
	
	**注意：**如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
	
	flex-shrink: number|initial|inherit;
	
	number一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 越大相对收缩越多。
	
	6. flew属性（flex-grow、flex-shrink和flex-basis的简写属性）
	flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
	flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

**注意：**如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。可只填一个数值，则默认只设置 flex-grow。
align-self 属性
**align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。 **
（1）边框：

	border-radius：圆角边框，border-radius:25px;
	
	box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888;
	
	border-image：边框图片，border-image:url(border.png) 30 30 round;
	
	（2）背景：
	
	background-size：规定背景图片的尺寸，background-size:63px 100px;
	
	background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box;
	
	CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);
	
	（3）文本效果：
	
	text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;
	
	word-wrap：允许文本进行换行。word-wrap:break-word;
	
	（4）字体：CSS3 @font-face 规则可以自定义字体。
	
	（5）2D 转换（transform）
	
	translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px,100px);
	
	rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg);
	
	scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4);
	
	skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg);
	
	matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	
	（6）3D 转换
	
	rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
	
	rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
	
	（7）transition：过渡效果，使页面变化更平滑
	
	transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
	
	transition-duration：过渡动画的一个持续时间。
	
	transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。
	
	transition-delay：延迟多久后开始动画。
	
	简写为：transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>];
	
	（8）animation：动画
	
	使用CSS3 @keyframes 规则。
	
	animation-name: 定义动画名称
	
	animation-duration: 指定元素播放动画所持续的时间长
	
	animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)： 指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。
	
	animation-delay: 指定元素动画开始时间
	
	animation-iteration-count:infinite | <number>：指定元素播放动画的循环次
	
	animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
	
	animation-play-state:running | paused ：控制元素动画的播放状态。
	简洁
	CSS3新增属性用法整理：
		1、box-shadow（阴影效果）
		2、border-color（为边框设置多种颜色）
		3、border-image（图片边框）
		4、text-shadow（文本阴影）
		5、text-overflow（文本截断）
		6、word-wrap（自动换行）
		7、border-radius（圆角边框）
		8、opacity（透明度）
		9、box-sizing（控制盒模型的组成模式）
		10、resize（元素缩放）
		11、outline（外边框）
		12、background-size（指定背景图片尺寸）
		13、background-origin（指定背景图片从哪里开始显示）
		14、background-clip（指定背景图片从什么位置开始裁剪）
		15、background（为一个元素指定多个背景）
		16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
		17、hsla（在hsl的基础上增加透明度设置）
		18、rgba（基于rgb设置颜色，a设置透明度）