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一起使用时高性能移动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，从而提升性能。转载于:https://www.cnblogs.com/gutianer/p/8022950.html
