CSS3新特性

一、css3选择器

1、 [class~=flower]
选择 title 属性包含单词 "flower" 的所有元素。
2、 [class|=box]
选择 lang 属性值以 "box" 开头的所有元素。
3、 :focus
选择获得焦点的 input 元素。
4、 p::first-letter
选择每个 元素的首字母。
5、 p:first-child
选择属于父元素的第一个子元素的每个 元素。
6、 ::after ---- ::before
在每个 元素的内容之前插入内容。-----在每个 元素的内容之后插入内容。
7、 a[class^=red]
选择其 class 属性值以 "red" 开头的每个 <a> 元素。
8、.box2 [class$=red]
选择其 class 属性以 "red" 结尾的所有 .box 2元素。
9、 a[src*="abc"]
选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
10、.box3 h1:first-of-type
11、 tr:nth-child(2n+1)
选择属于其父元素的基数子元素的每个 元素。
12、 :disabled
选择每个禁用的 <input> 元素

二、css3的浏览器私有前缀

chrome/safari : -webkit-
FF: -moz-
ie: -ms-
Opera: -o-
!!!!!!如何处理私有前缀：autoprefixer插件

三、css3的过渡

    transition-property: width;
    /*规定应用过渡的 CSS 属性的名称。*/
    transition-duration: 1s;
    /*定义过渡效果花费的时间。默认是 0。*/
    transition-timing-function: linear;
   /*规定过渡效果的时间曲线。默认是 "ease"。*/
    transition-delay: 2s;
    /*规定过渡效果何时开始。默认是 0。*/
    /*简写： transition: width 1s linear 2s;*/
/*三种形式*/
    transition: all 1s;
    transition: width 1s;
    transition: width 1s,height .5s 3s;

四、图标字体

1、使用图标字体的原理
（1）引入字体文件 *.ttf或其它
（2）在html文件中：定义字体
@font-face{
font-family: 'mzd';
src:'字体文件的地址'
}
(3)使用字体
.box {
font-family: 'mzd'
}
2、使用时的两种方案
（1）阿里巴巴图标字体
（2）font-awesome: 图标字体库

五、transform变形

    /*translate()---平移*/
    transform: translate(x,y);
    transform: translate3d(x,y,0);
    /*用translate3d能起到优化作用*/
    /*rotate()---旋转*/
    transform: rotate(30deg);
    /*scale()---缩放*/
    transform: scale(2);
    /*skew()--倾斜*/
    transform: skew(30deg,45deg)
    /*transform-origin()  --- 设置变换中心*/
    transform-origin:x y

六、animation动画

1、animation动画的使用方法
（1）先定义动画规则

  @keyframes ripple{
                0% {}
                25% {}
            }

（2）使用动画规则

   .box {
                animation: ripple 3s;
            }

2、animation的属性

            animation: fly 2s; 
            /*规定 @keyframes 动画的名称。*/
            animation-name: fly;
             /* 规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
            animation-duration: 2s;
            /*规定动画的速度曲线。默认是 "ease"。*/
            animation-timing-function: cubic-               bezier(.46,-0.48,.24,1.46); 
            /*规定动画何时开始。默认是 0。*/
            animation-delay: 2s; 
           /* 规定动画被播放的次数。默认是 1。（infinite: 无限次） */
            animation-iteration-count:2 ;
            /* 规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate'。*/
            animation-direction:alternate;
            /*  规定动画是否正在运行或暂停。默认是 "running",'paused'。*/
            animation-play-state: paused;
            /*规定对象动画时间之外的状态。*/
            animation-fill-mode: both;  // backwards forwards

七、3d变换

1、能够实现3d立体效果的属性
    transform: rotateX()
    transform: rotateY()
    transform: translateZ()
2、3d动画效果中最重要的属性
    （1）perspective:   舞台上
    (2) transform-style: preserve-3d;  (加在3d变换元素的父元素上，在动画中，一般是控制父元素的动画) 
    （3）变形的中心点： transform-origin : x轴 y轴 z轴; （z轴要用具体的像素）
    （5）背面隐藏： backface-visibility: hidden;

八、媒体查询&响应式布局

 /*1、设置视口（了解）*/：  
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

 /*2、根据屏幕宽度，加载不同的*.css文件*/
        <link rel="stylesheet" href="css/responsive.css" media="(max-width:1200px) and (min-width: 992px)">

 /*3、（重点）根据屏幕宽度，设置不同的css样式*/
        @media (max-width: 1200px) and (min-width: 992px){
            .wrapper { width:970px; margin:0 auto; }
            .header .nav>ul>li>a { width:100px; }
        }
        @media (max-width: 992px) and (min-width: 768px){
            .wrapper { width:750px; margin:0 auto; }
            .header .nav>ul>li>a { width:70px; font-size:12px;}
            .header .logo img {width: 100px; height: auto;}
        }
        @media (max-width: 768px){
            .wrapper { width:90%; margin:0 auto; }
            .header .nav { display: none;}
            .header .logo img {width: 100px; height: auto;}
        }

九、css边框

border-radius: 50%;

十、css背景

background-size: 199px  |   100%  |  cover | contain

十一、渐变：

    线性渐变 ：
         background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
        background: linear-gradient(#f00, #00f, #0f0);
    径向渐变：
         background: -webkit-radial-gradient(red, green, blue);
        /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, green, blue);
        /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, green, blue);
        /* Firefox 3.6 - 15 */
        background: radial-gradient(red, green, blue);

十二、盒子阴影：

    box-shadow: 1px 2px 4px #f00

十三、border和padding 添加在content区域：

box-sizing: border-box;

十四、省略号：

  overflow:hidden;   
  white-space:nowrap    
  text-overflow: ellipsis;

十五、弹性盒子（！！！！！面试的重点）

   /* 添加在伸缩容器上*/
        display: flex
        flex-direction: row
        justify-content: flex-start
        align-items: flex-start
        flex-wrap: wrap;
        flex-flow: row wrap;
        align-content: flex-start; (多行的对齐方式)
    /*添加在伸缩项目上      单个项目的对齐方式*/
         align-self: flex-end;
         flex: 1;
         margin-right: auto;
         order: 1;