css3

2bdenny 發布于2019-08-30 14:21 / 2597人閱讀

摘要：實現單行文本溢出顯示當然還需要加寬度屬來兼容部分瀏覽。為了實現該效果，它需要組合其他的屬性。常見結合屬性必須結合的屬性，將對象作為彈性伸縮盒子模型顯示。

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;
}

云服務器 GPU云服務器 css3 css3氣泡 css3動畫 JS+CSS3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115963.html

CSS重塑計劃（一）：選擇符

摘要：重塑計劃一選擇符元素選擇符通配選擇符，選擇所有元素對象。選擇符，以唯一標識符屬性等于的對象作為選擇符。選擇具有屬性且屬性值為包含的字符串的元素。偽類選擇符設置超鏈接在未被訪問前的樣式。僅用于規則匹配不含有選擇符的元素。 CSS重塑計劃（一）：選擇符元素選擇符 *通配選擇符(Universal Selector)，選擇所有元素對象。E類型選擇符(Type Selector)，以文檔語言...

lx1036 2019-08-29 12:23 評論0 收藏0
前端面試題-漸進增強和優雅降級

摘要：一背景介紹漸進增強和優雅降級這兩個概念是在出現之后火起來的。二概念理解漸進增強漸進增強一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果交互追加功能達到更好的體驗。一、背景介紹漸進增強和優雅降級這兩個概念是在 CSS3 出現之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器...

HollisChuang 2019-08-30 14:10 評論0 收藏0
雜談：漸進增強與優雅降級

摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

hiyang 2019-08-29 16:12 評論0 收藏0
雜談：漸進增強與優雅降級

摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

王軍 2019-08-23 10:29 評論0 收藏0
雜談：漸進增強與優雅降級

摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

SimonMa 2019-08-02 11:03 評論0 收藏0