我知道的 C3 的新特性有很多，常见的如下:

• border-radius:圆角边框
• box-shadow:盒子阴影
• background-size:背景图片大小
• transition:过渡
• transform:转换(位移 旋转 缩放)
• animation:动画
• linear-gradient:线性渐变
• box-sizing:css3 盒子模型

详解:

border-radius:圆角边框

border-radius: 15px;

box-shadow:盒子阴影

 .box{ 
      text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
 } 

background-size:背景图片大小

background-size:80px 80px

css3渐变效果

linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

Transition 对象变换时的过渡效果**

•  transition-property 对象参与过渡的属性
•  transition-duration 过渡的持续时间
•  transition-timing-function 过渡的类型
•  transition-delay 延迟过渡的时间 缩写：

transition:border-color 2s ease-in 1s, background-color 2s ease-in 1s, color 2s ease-in 1s;

拆分：

transition-property:border-color, background-color, color; //对象参与过渡的属性
transition-duration:2s, 2s, 2s; //过渡的持续时间
transition-timing-function:ease-in, ease-in, ease-in; //过渡的类型
transition-delay:1s, 1s, 1s;//延迟过渡的时间

transform

translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

Animation动画特效

<style >
    .box{
        position: absolute;
        left: 10px;
        top:200px;
        height:45px;
        width: 300px;
        background-color:cadetblue;
    }
    .main:hover{
        animation: animations 2s ease 0s;
    }
    @keyframes animations {
        0%{
            left: 10px;
            opacity: 1;
        }
        50%{
            left: 50%;
            opacity: .7;
            margin-left:-150px;
        }
        100%{
            left: 100%;
            opacity: 0;
            margin-left:-300px;
        }
    }
</style>
 <div class="box"></div>