css3

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瀏覽器及移動端；

  • 一、-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘的WebKit屬性。常見結合屬性：
  • 二、display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。
  • 三、-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;
}