[css3]知识点（自己总结版）

作者：zccst

CSS3是一个包含多方面的知识，主要分两大类，一类是在css2基层上改进的，另一类是完全新增的
批注：这里只是提纲，具体知识点可参考：http://zccst.iteye.com/blog/2192532

首先是媒体查询，这个是入口

@media screen and (min-width:400px)



一、在原有基础上改进和升级
1，盒模型
box-sizing: border-box / content-box

display: table / table-cell / box
    table/table-cell与vertical-align=midden用来布局垂直居中的（同top:50%,left:50%,translate:-50% -50%;）
    box相关的有display:box, box-pack（对齐）,box-align,box-flex（子元素伸缩）

background: 
    background-clip（裁剪区域）,
    background-origin（对齐参考区域）,
    background-size（尺寸大小）

border-radius:   border-top-left-radius:100%;
border-shadow:
border-image:


2，文本、列表、表格等HTML元素增强
text-overflow:
text-shadow:



3，增强类选择器
[class=""]

nth-child(n)
:first
:last

::before
::after


二、全新的
1，线性渐变，用于增强网页效果，不需要背景图片了
gradient  n.  倾斜度, 升降率, 坡度  adj. 倾斜的；步行的
短语  pressure gradient 气压梯度  temperature gradient 温度梯度
（1）线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
默认是从上到下：{height: 200px;background: -webkit-linear-gradient(red, blue);}
还可以从左到右：background: -webkit-linear-gradient(left, red , blue);
还可以对角线Diagonal：background: -webkit-linear-gradient(left top, red , blue);
旋转角度：background: -webkit-linear-gradient(180deg, red, blue);
background: -webkit-linear-gradient(red, green, blue);

http://www.w3cplus.com/css3/new-css3-linear-gradient.html

（2）圆形渐变
略


2，动画，用来取代Flash效果的
(1) transform  对元素进行旋转、缩放、移动或倾斜
例如：
transform: translate(50px,100px);//打开时已经到坐标(50px,100px)
批注：translate(0,-142%);//x轴不变，y轴向上提示自身高度的1.42倍。相当于把自己从地面站到距地面高度是你身高的1.42倍的位置。如果你的身高是两米，执行完translate(0, -142%)，就站在2.82米高的位置。
rotate 沿X,Y,Z轴旋转，其中Z适合用来loading
scale(x,y) 缩放，沿X轴缩放x倍，沿Y轴缩放y倍。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

(2) transition  过渡是元素从一种样式逐渐改变为另一种的效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
例如：transition: width 2s;

(3) animation  , keyframes
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-delay  在动画开始之前的延迟
animation-direction是否应该轮流反向播放动画。
@keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}


3，