PC常見CSS效果錦集 - 01

各個主流瀏覽器內核

• IE: Trident
• Safari: webkit 內核
• Opera: 之前是presto 內核，如今改用Google Chrome 的Blink內核
• Chrome: Blink(基於webkit,Google與Opera Software 共同開發)
• 360: 雙內核（極速模式：webkit，兼容模式：Trident；）
• Firefox: Geoko

常見的css效果

文本多行溢出

• css 代碼實現

display: -webkit-box !important;
            overflow: hidden;

            text-overflow: ellipsis;
            word-break: break-all;

            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

• 通過測試，在Google、Opera、360極速模式下正常顯示，IE、Firefox、360兼容模式下沒有效果，還須要使用height來限制內容高度

文本單行溢出

• css 代碼實現

overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;

• Google、Opera、360、IE、Firefox都正常顯示

背景透明

• raba(90,183,232,.6)
  通過測試，Google、Firefox、Opera、360極速模式均可以正常顯示透明度，IE8和360兼容模式(IE8)不可以正常顯示透明度

• opacity= 0.6
  通過測試，oogle、Firefox、Opera、360極速模式均可以正常顯示透明度，IE8和360兼容模式(IE8)不可以正常顯示透明度

• 解決IE8下背景透明問題

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#cc12485d',endColorstr='#cc12485')

以顏色值 #FF99CC00 爲例，其中，FF是透明度，99是紅色值， CC是綠色值， 00是藍色值。