C3新增的一些属性总结

C3的选择器：
1.关系选择器：ul>li子代选择器
              ul li后代选择器
             .now+li后一个兄弟为li的元素
             .now~li后面所有为li的兄弟元素
2.属性选择器：li[属性||自定义属性 ='值'] li里面属性或者自定义属性=值的元素
             li[属性] 所有有此属性的元素
             li[属性^='du'] 值以du字母开头的
             li[属性$='du'] 值以du字母结束的
             li[属性*='du']  值包含du字母的
3.伪类选择器：li:first-child li的父元素下第一个为li的子元素
             li:last-child li的父元素下最后一个为li的子元素
             li:nth-child(下标) li的父元素下对应下标的子元素，下标从1开始
                下标还可以用odd奇数或even偶数 表示下标为奇偶的的子元素
                 或者n  n从0开始 2n+1 奇数
             li:nth-of-type（下标n） 父元素下标签为li下标为n的子元素
             li:first-of-type      li:last-of-type
4.伪元素选择器： ::after{}::before{}::first-letter第一个字 ::first-line第一行

C3中阴影设置：
  文字阴影：
   text-shadow:水平偏移 垂直偏移 羽化值 阴影颜色 （px px px color）;
   盒子阴影：
   box-shadow:（inset内阴影） 水平偏移 垂直偏移 羽化值 外延值 阴影颜色 （inset + px px px px color）;

C3背景设置：background系列

C3渐变：线性渐变  background-image: linear-gradient(to 方向//45deg，color，color);
        径向渐变  background-image: radial-gradient(20px at center ,color,color);

C3过渡：transition：all 1s;合写    transitionend过渡结束事件

C3之2D转换：transform 只能写一个，多了会覆盖，合写用空格隔开
          transform: scale(1.5);缩放
          transform-origin: top;设置转换原点
          transform: rotate(45deg);转换角度
          transform: translate(20px,20px);平移距离 translateX translateY
          transform: skewX(45deg);斜切

C3之3D转换：perspective: 1000px; 给有3d效果的父元素添加 显示近大元小的3D效果
           transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);角度转换
           transform: translateX(20px) translateY(20px) translateZ(20px);平移位置
           transform-style: preserve-3d;子盒子要呈现3D效果，父盒子必须添加这个属性



媒体查询：（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。
 用在响应式开发 原理：使用媒体查询实现不同终端的布局和样式的切换。
 用法：@media screen and （条件） {
    }
    条件的写法，多个条件用and链接
    min-width:只要屏幕宽度超过这个值的设备样式就能生效
    max-width:只要屏幕宽度小于这个值的设备样式就能生效
  例：@media screen and (min-width: 992px) and (max-width: 1200px) {
    .container {
       width: 970px;    background-color: blue;
    }
    };