CSS3

 

(相对于css增加的内容)

1.动画（animation）

    @keyframes                     规定动画，后边跟动画名称，再接大括号内的各种属性；
    animation                      所有动画属性合集；
    animation-name                 名称；调用一个动画时指定的动画格式来源名称；
    animation-duration             动画时间；
    animation-timing-function   　 动画速度曲线；值：linear(速度一直相同),ease(首尾慢，中间快）,ease-in(开始慢),ease-out(结尾慢),ease-in-out,cubic-bezier(n,n,n,n)函数定义；
    animation-delay                动画延期开始时间；
    animation-iteration-count      播放次数，默认为1；
    animation-direction            动画是否在下一周期逆向播放；值：normal,reverse(反向播放),alternate(奇正偶反),alternate-reverse(奇反偶正),initial,inherit;
    animation-play-state    　     动画状态，值:running(默认),paused（暂停）；

2.渐变(gradients)

让使用颜色的地方在两个或多个指定颜色之间平稳过渡，css3有线性和径向渐变两种；

    (color1,color2)                     　　　　　默认从上到下的渐变，例：background:(red,yellow);
    (to right,color1,color2)       　 　　　　　　 从左到右，火狐和opera浏览器的可以省略to,webkit浏览器的使用left,下同；
    (to left,color1,color2)            　　　　   从右到左；
    (to bottom,color1,color2)           　　　　  从上到下；
    (to top,color1,color2)              　　　　　从下到上；
    (to bottom right,color1,color2)    　　　　   从左上角到右下角；
    linear-gradient(90deg,color1,color2)　　　　  按角度渐变，新标准是我们数学的角度标准，老的则是按相反方向走角度的，如90新标准表示从下到上，旧标准为从上到下；
    (color1,color2,color3)             　　　　   依次多个颜色的渐变，方向角度等的用法同上；
    repeating-linear-gradient(color1,color2 10%) 重复线性渐变；
    radial-gradient(color1,color2)      　　　　　从内到外均匀径向渐变；当颜色后加上百分比时，则是按比例渐变，所有颜色比例和不一定要等于100%；
    radial-gradient(circle,color1,color2)　　　　 设定形状渐变，默认是ellipse（椭圆）
    repeating-radial-gradient(color1,color2 20%) 重复径向渐变；

3.2D转换属性transform的值

    translate(x,y)        平移给定距离的位置；例：transform: translate(50px,100px);
    rotate(angle)         旋转一个角度，值为deg单位数值，可以为负数，即逆时针旋转；
    scale(x,y)            缩放，值为原来的倍数；        
    skew(angle,angle2)    x,y方向上倾斜（不是旋转）,第二个值可以省略，默认为0；
    matrix()              以上属性合集，包含六个值，依次为：旋转，绽放，平移，倾斜；

4.3D转换

    transform              2D转换的值都可使用，还增加了rotateX()绕X轴旋转，和rotateY()绕Y轴旋转，rotateZ()，perspective()透视，
    transform-origin    　 更改转换元素位置；
    transform-style        值：flat(2D平面呈现),preserve-3d(3D空间呈现)
    perspective            透视，值为px距离，或none;
    perspective-origin     定义子元素的透视；
    backface-visibility    定义当前元素不面向屏幕时是否可见，值：visible,hidden;

5.过渡

    transition-property           显示过度的属性，值：none,all,指定css属性名以逗号分隔；
    transition-duration           过渡时间，值为时间，一般为秒(s);
    transition-timing-function    速度曲线，值：linear(速度一直相同),ease(首尾慢，中间快）,ease-in(开始慢),ease-out(结尾慢),ease-in-out,cubic-bezier(n,n,n,n)函数定义；
    transition-dilay              延迟时间；
    transition                    过渡属性合集；

6.多列(column)

    column-count       　　元素被分割的列数；
    column-fill            列填充方式；值：balance短平衡，auto
    column-gap             列间距；
    column-ruls            两列间边框样式合集；
    column-rule-color      颜色；值为css颜色；
    column-rule-style      样式；值：none,hidden,dotted(点状),dashed(虚线),solid(实线),double(双线),groove(定义双线，宽度为border-width),ridge(三维菱形),inset(三维凹边框),outset(三维凸边框)；
    column-rule-width      宽度；值：thin,medium,thick,长度单位值；
    column-span            元素要跨越的列数；
    column-width     　　   列宽；
    columns                column-width和column-count的合集；

7.弹性盒子

    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;
    flex-direction         弹性容器在子元素排列方式，值：row(默认),row-reverse,column,column-reverse;initial,inherit;
    justify-content        弹性盒子元素在主横轴方向对齐方式；值：flex-start(默认位于开头),flex-end,center,space-between(项目位于各行间留有空白的容器内),space-around,initial,inherit
    align-items            弹性盒子内子元素在纵轴方向对齐方式：值:stretch(默认),center,flex-start,flex-end,baseline(位于容器基线),initial,inherit;
    flex-wrap              设置弹性盒子的子元素超出父容器时是否换行。值：nowrap(默认),wrap(换),wrap-reverse,initial,inherit;
    align-content          修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐;值：stretch,center,flex-start,flex-end,space-between,space-around,initial,inherit;
    flex-flow              flex-direction和flex-wrap合集；
    order                  弹性盒子子元素排列顺序，值为数字，默认0；
    align-self            在弹性子元素上使用，覆盖容器的align-item属性，值：stretch(默认),center,flex-start,flex-end,baseline(位于容器基线),initial,inherit;
    flex                  设置弹性盒子子元素空间分配方式，值：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

8.其他新特性

    appearance            定义一个元素的外观为指定样式，值：normal,icon(小图片样式),window(窗口),button,menu,field(输入字段样式);
    box-sizing            允许你以某种方式定义某些元素，以适应指定区域。值：content-box(默认),border-box,inherit;
    icon                  将元素设置为图标等价物,值为auto,URL(如有多个图标，对逗号分隔);
    outline-offset        外轮廓修饰并绘制超出边框的边缘;
    resize                元素可由用户调整大小的部分；值:none,both,horizontal(宽度),vertical(高度);

**使用css制作按钮

    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }