css3新特性

1.边框

使用css，可以创建新的圆角边框（border-radius），添加阴影框（box-shadow），图片作为边框（border-image）

2.背景属性

background-image、background-size、background-clip、background-position等

3.渐变属性

linear-gradient :

#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 /* Opera 11.1 - 12.0 */ 
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 /* 标准的语法 */ 
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

也支持渐变透明度，颜色用rgba设置
也支持监督渐变

4.新的文本效果

text-shadow、box-shadow、text-overflow、word-wrap、word-break

5.字体

@font-face

@font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

6. 2D/3D转换

transform、transform-origin
方法：translate、rotate、scale、skew、matrix

7.过渡效果

transition: 过渡属性名、过渡时间、时间曲线、延迟时间

8.动画

@keyframe + animation

9.弹性布局（flex box）

10.用户界面

resize
box-sizing
outline-offset

11.媒体查询

@media 媒体类型 and (条件) {
    
}
 
// 例子
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}