国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3

2bdenny / 2589人閱讀

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

CSS

消除transition閃屏
-

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

過渡動(dòng)畫（在沒有啟動(dòng)硬件加速的情況下）會(huì)出現(xiàn)抖動(dòng)的現(xiàn)象， 以上的 解決方案只是改變 視角 來啟動(dòng)硬件加速的一種方式； 啟動(dòng)硬件加速的 另外一種方式：

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

啟動(dòng)硬件加速 最常用的方式：translate3d、translateZ、transform

opacity屬性/過渡動(dòng)畫（需要?jiǎng)赢媹?zhí)行的過程中才會(huì)創(chuàng)建合成層，動(dòng)畫沒有開始或結(jié)束后元素還會(huì)回到之前的狀態(tài)）

will-chang屬性（這個(gè)比較偏僻），一般配合opacity與translate使用（而且經(jīng)測試，除了上述可以引發(fā)硬件加速的屬性外， 其它屬性并不會(huì)變成復(fù)合層），

弊端： 硬件加速會(huì)導(dǎo)致 CPU性能占用量過大，電池電量消耗加大 ；因此 盡量避免泛濫使用硬件加速。

css實(shí)現(xiàn)單行文本溢出顯示 ...

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
//當(dāng)然還需要加寬度width屬來兼容部分瀏覽。

實(shí)現(xiàn)多行文本溢出顯示...

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

因使用了WebKit的CSS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端；

1、-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結(jié)合屬性：

2、display: -webkit-box; 必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。

3、-webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115963.html

相關(guān)文章

  • CSS重塑計(jì)劃（一）：選擇符

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

    lx1036 評(píng)論0 收藏0

  • 前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

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

    HollisChuang 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

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

    hiyang 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

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

    王軍 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

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

    SimonMa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<