PC常见CSS效果锦集 - 01

2019独角兽企业重金招聘Python工程师标准>>>

各个主流浏览器内核

• 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是蓝色值。

转载于:https://my.oschina.net/u/3094219/blog/804189