CSS3你用的最多的特性有哪些呢？

选择器

nth-of-type

nth-child

• 定义和用法
  nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。
  nth-of-type(n)和nth-child(n)的用法类似，不过nth-of-type(n)必须指定子元素的标签类型

参考文章-----》

盒子模型 box-sizing

box-sizing：content-box || border-box || padding-box || inherit
参考文章

动画（transform transition animation）

• 实现2D，3D转换
  2D方法有以下：
  translate()
  rotate()
  scale()
  skew()
  matrix()

div{transform: translate(50px,100px);} // translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
div{transform: rotate(30deg);} //顺顺时针旋转30度
div{transform: scale(2,4);}   //元素宽度放大2倍，高度放大4倍

了解更多

• transition实现过渡
  如下实例实现了盒子宽度过渡线性延升至200px宽度的效果。

div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;  
//transition: width 1s linear 2s; //简写方法
}

div:hover{
        width:200px;
        }

• animation实现动画
  如需在 CSS3 中创建动画，需要学习 @keyframes 规则。
  @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
  注意点：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

//把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;

}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

了解更多

边框

• border-radius
  应用：使用 border-radius画一个圆，半圆
  只需设置 border-radius：50%

.c1{
	background-color: #eeff50;
	border-radius: 50%;
    width: 50px;
	height:50px;
	
	 }

• box-shadow
• border-image

flex布局

Flex 是 Flexible Box 的缩写 ，意思是 ”弹性布局”，用来为盒子模型提供最大的灵活性。
设置flex布局后，子元素的float、clear 和vertical-align 属性将失效。

了解更多

多列（column）

• column-count ：3；//分为多少列
• column-gap：10px；//列之间的间隔
• column-rule：10px outset #fff ；//列之间的宽度，样式，颜色等