1、css3的新特性

• 圆角--border-radius
• 阴影--box-shadow
• 文字特效--text-shadow
• 渐变--gradient
• 旋转--transform（rotate：旋转、scale：缩放、translate：定位、skew：倾斜）
• 多背景
• rgba
• 边框背景--border-image
• 服务器端字体：font-face

  @font-face {font-family: 'MyFont'; /* 表示为这种字体起一个名称，可以随意设置，这里用的是MyFont */ 　　src: url('myfont.eot'); /* 这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的 */ 　　src: local('myfont.ttf'), 　　url('myfont.woff') format('woff'), 　　url('myfont.ttf') format('truetype'); /* local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype */ } 

  使用的时候这样写就可以了。

  h2{ font-family: "MyFont"; } 

• 选择器的增加
• 伪元素::selection
• 媒体查询

• 多栏布局、弹性布局

  flex-box:

  • 弹性布局，适应性强，在做不同屏幕分表率的界面时非常实用
  • 可以随意按照宽度、比例划分元素的宽高
  • 可以轻松改变元素的显示顺序
  • 自适应布局实现快捷，易维护

  属性：

  .flex{display: box; // 将一个元素的子元素以弹性布局进行布局 box-flex: 1; // 子元素如何分配剩余空间 box-orient: horizontal | vertical | inline-axis | block-axis | inherit; // 子元素的排列方式（横向或者竖向） box-direction: normal | reverse | inherit; // 子元素排列顺序 box-align: start | end | center | baseline | stretch; // 垂直对齐方式 box-pack: start | end | center | justify; // 水平对齐方式 box-ordinal-group: ; // 子元素的显示顺序 }

2、css3对性能的影响和优化

css3 在使用起来非常强大，实现效果快，但有些属性对页面性能有影响，尤其在手机端使用的时候

• box-shadow 如果大量使用box-shadow，又或者容器比较大的时候，性能都会降低很多；无论是Firefox还是Chrome，对box-shadow的支持都存在这个问题，Opera则好上很多，带来的迟滞感不是很强。
• gradients 页面性能杀手，尤其是在和 box-shadow一起使用时

目前对提升移动端CSS3动画体验的主要方法有几点：

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。

• 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

  .demo{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } // 如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack： .demo{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } 

• 尽可能少的使用box-shadows与gradients

• 尽可能的让动画元素不在文档流中，以减少重排(position 定位 让元素脱离文档流)
• 执行队列，所有可触发layout的操作都会被暂时放入 layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout，从而提升性能。