前端零碎问题（四）css3

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，从而提升性能。