CSS3新特性

1. CSS3新选择器

   • E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式

   • E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

   • E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应

   • E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素

   • E:empty 选择没有子元素的每个E元素

   • E:target 选择当前活动的E元素

   • ::selection 选择被用户选取的元素部分

2. 文本

   • text-shadow（参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色 ）

     text-shadow:2px 2px 8px #000;
     

   • text-overflow 规定当文本溢出包含元素时发生的事情

     text-overflow:ellipsis;
     

   • text-wrap：规定文本换行的规则

   • word-break 规定非中日韩文本的换行规则

   • word-wrap：对长的不可分割的单词进行分割并换行到下一行

   • white-space：规定如何处理元素中的空白

     white-space:nowrap; // 规定段落中的文本不进行换行
     

3. 边框

   • border-raduis 边框的圆角

   • border-image 边框图片

     .border-image {
         border-image-source:url(images/border.png);
         boder-image-slice:27;
         border-image-width:10px;
         border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边  
     }
     

4. 背景

   • rgba（rgb为颜色值，a为透明度）
   • backgrounnd-size
     • background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
     • background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片

5. 渐变

   • linear-gradient

     background-image:linear-gradient(90deg,yellow 20%,green 80%);
     

   • radial-gradient

     background-iamge:radial-gradient(120px at center center,yellow,green);
     

6. 多列布局

   • column-count 指定元素应该被分割的列数
   • column-width 属性指定了列的宽度
   • column-gap 属性指定了列与列间的间隙
   • column-rule 是column-rule-* 所有属性的简写

7. 过渡

   • transition
     • transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔
     • transition-duration:2s; //过渡持续的时间
     • transition-timing-function:ease;
     • transition-delay:5s //过渡延迟5s进行

8. 动画、旋转

   • animation 动画

   • transform 形状转换

     • translate 转换

     • scale 缩放

     • rotate 旋转

       div
       {
           transform:rotate(7deg);
       }
       

     • skew 倾斜

9. flex布局（flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩）

10. 媒体查询（就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式）

11. 盒模型

    • box-sizing

      • border-box：边框和padding包含在元素的宽高之内
      • content-box：边框和padding不包含在元素的宽高之内

    • box-shadow 阴影（水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里））

      box-shadow: h-shadow v-shadow blur spread color inset;