(相对于css增加的内容)
1.动画（animation）
1 @keyframes 规定动画，后边跟动画名称，再接大括号内的各种属性； 2 animation 所有动画属性合集； 3 animation-name 名称；调用一个动画时指定的动画格式来源名称； 4 animation-duration 动画时间； 5 animation-timing-function 动画速度曲线；值：linear(速度一直相同),ease(首尾慢，中间快）,ease-in(开始慢),ease-out(结尾慢),ease-in-out,cubic-bezier(n,n,n,n)函数定义； 6 animation-delay 动画延期开始时间； 7 animation-iteration-count 播放次数，默认为1； 8 animation-direction 动画是否在下一周期逆向播放；值：normal,reverse(反向播放),alternate(奇正偶反),alternate-reverse(奇反偶正),initial,inherit; 9 animation-play-state 动画状态，值:running(默认),paused（暂停）；
2.渐变(gradients)
让使用颜色的地方在两个或多个指定颜色之间平稳过渡，css3有线性和径向渐变两种；
1 (color1,color2) 默认从上到下的渐变，例：background:(red,yellow); 2 (to right,color1,color2) 从左到右，火狐和opera浏览器的可以省略to,webkit浏览器的使用left,下同； 3 (to left,color1,color2) 从右到左； 4 (to bottom,color1,color2) 从上到下； 5 (to top,color1,color2) 从下到上； 6 (to bottom right,color1,color2) 从左上角到右下角； 7 linear-gradient(90deg,color1,color2) 按角度渐变，新标准是我们数学的角度标准，老的则是按相反方向走角度的，如90新标准表示从下到上，旧标准为从上到下； 8 (color1,color2,color3) 依次多个颜色的渐变，方向角度等的用法同上； 9 repeating-linear-gradient(color1,color2 10%) 重复线性渐变； 10 radial-gradient(color1,color2) 从内到外均匀径向渐变；当颜色后加上百分比时，则是按比例渐变，所有颜色比例和不一定要等于100%； 11 radial-gradient(circle,color1,color2) 设定形状渐变，默认是ellipse（椭圆） 12 repeating-radial-gradient(color1,color2 20%) 重复径向渐变；
3.2D转换属性transform的值
1 translate(x,y) 平移给定距离的位置；例：transform: translate(50px,100px); 2 rotate(angle) 旋转一个角度，值为deg单位数值，可以为负数，即逆时针旋转； 3 scale(x,y) 缩放，值为原来的倍数； 4 skew(angle,angle2) x,y方向上倾斜（不是旋转）,第二个值可以省略，默认为0； 5 matrix() 以上属性合集，包含六个值，依次为：旋转，绽放，平移，倾斜；
4.3D转换
1 transform 2D转换的值都可使用，还增加了rotateX()绕X轴旋转，和rotateY()绕Y轴旋转，rotateZ()，perspective()透视， 2 transform-origin 更改转换元素位置； 3 transform-style 值：flat(2D平面呈现),preserve-3d(3D空间呈现) 4 perspective 透视，值为px距离，或none; 5 perspective-origin 定义子元素的透视； 6 backface-visibility 定义当前元素不面向屏幕时是否可见，值：visible,hidden;
5.过渡
1 transition-property 显示过度的属性，值：none,all,指定css属性名以逗号分隔； 2 transition-duration 过渡时间，值为时间，一般为秒(s); 3 transition-timing-function 速度曲线，值：linear(速度一直相同),ease(首尾慢，中间快）,ease-in(开始慢),ease-out(结尾慢),ease-in-out,cubic-bezier(n,n,n,n)函数定义； 4 transition-dilay 延迟时间； 5 transition 过渡属性合集；
6.多列(column)
1 column-count 元素被分割的列数； 2 column-fill 列填充方式；值：balance短平衡，auto 3 column-gap 列间距； 4 column-ruls 两列间边框样式合集； 5 column-rule-color 颜色；值为css颜色； 6 column-rule-style 样式；值：none,hidden,dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为border-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)； 7 column-rule-width 宽度；值：thin,medium,thick,长度单位值； 8 column-span 元素要跨越的列数； 9 column-width 列宽； 10 columns column-width和column-count的合集；
7.弹性盒子
1 display none(不显示),block,inline(默认),inline-block,list-item,run-in,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-colummn,table-cell,table-caption,inherit; 2 flex-direction 弹性容器在子元素排列方式，值：row(默认),row-reverse,column,column-reverse;initial,inherit; 3 justify-content 弹性盒子元素在主横轴方向对齐方式；值：flex-start(默认位于开头),flex-end,center,space-between(项目位于各行间留有空白的容器内),space-around,initial,inherit 4 align-items 弹性盒子内子元素在纵轴方向对齐方式：值:stretch(默认),center,flex-start,flex-end,baseline(位于容器基线),initial,inherit; 5 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。值：nowrap(默认),wrap(换),wrap-reverse,initial,inherit; 6 align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐;值：stretch,center,flex-start,flex-end,space-between,space-around,initial,inherit; 7 flex-flow flex-direction和flex-wrap合集； 8 order 弹性盒子子元素排列顺序，值为数字，默认0； 9 align-self 在弹性子元素上使用，覆盖容器的align-item属性，值：stretch(默认),center,flex-start,flex-end,baseline(位于容器基线),initial,inherit; 10 flex 设置弹性盒子子元素空间分配方式，值：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
8.其他新特性
1 appearance 定义一个元素的外观为指定样式，值：normal,icon(小图片样式),window(窗口),button,menu,field(输入字段样式); 2 box-sizing 允许你以某种方式定义某些元素，以适应指定区域。值：content-box(默认),border-box,inherit; 3 icon 将元素设置为图标等价物,值为auto,URL(如有多个图标，对逗号分隔); 4 outline-offset 外轮廓修饰并绘制超出边框的边缘; 5 resize 元素可由用户调整大小的部分；值:none,both,horizontal(宽度),vertical(高度);
**使用css制作按钮
1 .button { 2 background-color: #4CAF50; /* Green */ 3 border: none; 4 color: white; 5 padding: 15px 32px; 6 text-align: center; 7 text-decoration: none; 8 display: inline-block; 9 font-size: 16px; 10 }