CSS

消除transition闪屏

.css {     -webkit-transform-style: preserve-3d;     -webkit-backface-visibility: hidden;     -webkit-perspective: 1000; }

• 过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式； 启动硬件加速的 另外一种方式：

.css {     -webkit-transform: translate3d(0,0,0);     -moz-transform: translate3d(0,0,0);     -ms-transform: translate3d(0,0,0);     transform: translate3d(0,0,0);   }

• 启动硬件加速 最常用的方式：translate3d、translateZ、transform
• opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
• will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外， 其它属性并不会变成复合层），
• 弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；因此 尽量避免泛滥使用硬件加速。

css实现单行文本溢出显示 ...

overflow: hidden;  text-overflow:ellipsis;  white-space: nowrap;//当然还需要加宽度width属来兼容部分浏览。

实现多行文本溢出显示...

display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;

• 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

  • 1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  • 2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • 3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

改变placeholder的字体颜色大小

input::-webkit-input-placeholder {    /* WebKit browsers */    font-size:14px;    color: #333;}input::-moz-placeholder {    /* Mozilla Firefox 19+ */    font-size:14px;    color: #333;}input:-ms-input-placeholder {    /* Internet Explorer 10+ */    font-size:14px;    color: #333;}