前端零碎问题（四）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，从而提升性能。